确认将页面保留在 ArcGIS Web 应用程序生成器中

Question

我使用 ESRI ArcGIS Web App Builder 创建了一个应用程序。现在我想询问用户是否想在每次单击浏览器的前进或后退按钮或刷新页面时离开页面。

我测试了几种解决方案，但没有一个能正常工作。

解决方案一

在应用程序根文件夹中找到的index.html中添加以下内容，就在所有其他js脚本导入之后 - 我将其添加到

</body>

标签的正上方

<script type="text/javascript" src="init.js"></script> 
<script type="text/javascript" src="setLeavingConfirm.js"></script>   
</body>

然后，在

setLeavingConfirm.js

里面我有以下内容

 (function setCOnfirm() {
    window.addEventListener('beforeunload', function(e) {
        e.preventDefault()
        return 'Are you sure you want to leave? Changes will not be saved';
    }, {capture:true});//



  window.addEventListener('popstate', function(event) { 
      event.preventDefault()
      let r = confirm("Leave site? Changes you made may not be saved"); 
      if (r == true) { 
          history.back(); 
      } else { 
          history.pushState(null, null, window.location.pathname);
      }
      history.pushState(null, null, window.location.pathname);
  }, false );

})();

解决方案二

在应用程序的根文件夹中，然后在

jimu.js

文件夹中，有

main.js

文件。

在该文件内，我在

initApp() 

函数的顶部添加

  on(window, 'beforeunload', function(e){        
    e.preventDefault()
    return 'Are you sure you want to leave? Changes will not be saved';
  }, {capture:true});


  window.addEventListener('popstate', function(event) { 
      event.preventDefault()
      let r = confirm("Leave site? Changes you made may not be saved"); 
      if (r == true) { 
          history.back(); 
      } else { 
          history.pushState(null, null, window.location.pathname);
      }
      history.pushState(null, null, window.location.pathname);
  }, false );

这是基于道场的

on

事件。

正如我所说，两者都有效。为了让它们工作，我必须首先按键盘上的 Control + Shift + R 来删除缓存。否则我可以不经询问就离开页面。

我该如何解决，所以在离开页面之前我会被问到

Answer 1

使用

beforeunload

和

popstate

事件提示用户确认离开页面应该可行。
但是：并非所有浏览器都以相同的方式处理这些事件，有些浏览器（可能是 Safari）如果认为它用于显示“阻止”消息，可能会完全忽略

beforeunload

事件。

关于缓存问题，您可以尝试将以下代码添加到您的

setLeavingConfirm.js

文件中以禁用缓存：

// Disable caching
$(document).ready(function() {
  $.ajaxSetup({
    cache: false
  });
});

这将使用 jQuery 的

$.ajaxSetup()

方法 禁用应用程序发出的所有 AJAX 请求的缓存。

对于

beforeunload

事件未一致触发的问题，您可以尝试使用不同的方法来处理后退按钮导航。例如，尝试使用

hashchange

事件 而不是

popstate

事件。

(function setConfirm() {
  // Disable caching
  $(document).ready(function() {
    $.ajaxSetup({
      cache: false
    });
  });

  // Add event listener for beforeunload event
  window.addEventListener('beforeunload', function(e) {
    e.preventDefault();
    return 'Are you sure you want to leave? Changes will not be saved';
  }, {capture:true});

  // Add event listener for hashchange event
  window.addEventListener('hashchange', function(event) {
    let r = confirm("Leave site? Changes you made may not be saved");
    if (r == true) {
      history.back();
    } else {
      history.pushState(null, null, window.location.pathname);
    }
    history.pushState(null, null, window.location.pathname);
  }, false);

  // Prevent hashchange event from firing on initial load
  setTimeout(function() {
    window.onhashchange = null;
    window.onhashchange = function() { /* do nothing */ };
  }, 0);
})();

这将为

hashchange

事件添加一个事件侦听器，每当 URL 的哈希片段发生更改时（例如，当用户单击后退按钮时）就会触发该事件侦听器。然后，代码向用户显示一个确认对话框，如果用户单击“取消”，它会通过将当前 URL 推送到历史堆栈来阻止页面导航。

警告：如果它有效，它可能会“太好”，并且某些用户可能会觉得每次尝试离开页面时都会收到提示很烦人。如果用户已经保存了更改，您可能需要考虑添加一个标志来禁用确认对话框。