ArcGIS Web App Builder页面离开确认功能缓存问题修复咨询

问题背景 #

使用ArcGIS Web App Builder开发的应用，需要在用户点击浏览器前进/后退按钮、刷新页面时弹出确认提示，但现有两种方案仅在强制清缓存后生效，常规情况下用户可直接离开页面。

问题原因 #

1. 浏览器缓存机制：旧的脚本文件被浏览器缓存，新添加的事件监听代码未被加载。
2. 事件注册时机错误：ArcGIS WAB基于Dojo框架，提前注册的事件可能被框架内部的路由逻辑覆盖，或因DOM/框架未完全初始化导致监听失效。
3. popstate事件逻辑缺陷：原代码中多次操作历史栈，导致事件循环触发，无法正常拦截导航。

修复步骤 #

1. 强制浏览器加载最新脚本（解决缓存问题） #

在引入自定义脚本时添加版本参数，让浏览器识别为新文件，避免加载缓存：

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

每次修改脚本后更新版本号（如v=1.0.2）即可强制浏览器加载最新内容，无需用户清缓存。

2. 确保事件监听在框架初始化完成后注册 #

利用Dojo的domReady或WAB的appReady事件，确保在应用完全初始化后再绑定监听，避免被框架逻辑覆盖：
修改setLeavingConfirm.js内容如下：

require(["dojo/domReady!"], function() {
  // 处理页面刷新/关闭的beforeunload事件
  window.addEventListener('beforeunload', function(e) {
    e.preventDefault();
    // 部分浏览器需要显式设置returnValue才能触发提示
    e.returnValue = '确定要离开吗？未保存的更改将会丢失';
    return '确定要离开吗？未保存的更改将会丢失';
  }, { capture: true });

  // 处理前进/后退的popstate事件，避免循环触发
  let isNavConfirmed = false;
  window.addEventListener('popstate', function(event) {
    if (!isNavConfirmed) {
      event.preventDefault();
      const leaveConfirmed = confirm("离开此站点？你所做的更改可能不会被保存");
      
      if (leaveConfirmed) {
        isNavConfirmed = true;
        // 用history.go(-1)代替back，避免重复触发popstate
        history.go(-1);
      } else {
        // 重置当前历史状态，防止再次触发事件
        history.pushState(null, null, window.location.href);
      }
    } else {
      // 确认导航后重置标记，允许后续正常导航
      isNavConfirmed = false;
    }
  });
});

若需要更精准的时机，可改用WAB的appReady事件：

require(["jimu/loader!app/main"], function(appMain) {
  appMain.on('appReady', function() {
    // 此处放入上述事件监听代码
  });
});

3. 移除main.js中的冗余代码 #

如果之前在jimu.js/main.js的initApp()中添加了监听代码，建议移除，避免重复绑定导致冲突，统一使用setLeavingConfirm.js中的逻辑即可。

验证方法 #

修改完成后，直接刷新页面（无需强制清缓存），测试以下场景：

• 点击浏览器刷新按钮，应弹出离开确认提示
• 点击浏览器前进/后退按钮，应弹出确认提示，确认后正常导航，取消则停留在当前页面

内容的提问来源于stack exchange，提问作者slevin