我使用 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 来删除缓存。否则我可以不经询问就离开页面。
我该如何解决,所以在离开页面之前我会被问到
beforeunload
和 popstate
事件提示用户确认离开页面应该可行。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 推送到历史堆栈来阻止页面导航。
警告:如果它有效,它可能会“太好”,并且某些用户可能会觉得每次尝试离开页面时都会收到提示很烦人。如果用户已经保存了更改,您可能需要考虑添加一个标志来禁用确认对话框。