我尝试使用以下代码在关闭浏览器窗口时收到警报:
window.onbeforeunload = confirmExit; function confirmExit() { return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?"; }
它有效,但如果页面包含一个超链接,则单击该超链接会引发相同的警报.我只有在关闭浏览器窗口而不是单击超链接时才需要显示警报.
您可以在此网页中找到另一个实现:http: //ujap.de/index.php/view/JavascriptCloseHook
external link internal link, un-hooked
它的作用是使用变量作为标志.
保持您的代码不变并使用jQuery来处理链接:
$(function () { $("a").click(function { window.onbeforeunload = null; }); });
您可以检测超链接点击,但无法确定用户是否:
试图刷新页面.
尝试关闭浏览器选项卡.
试图关闭浏览器窗口.
在URL栏中输入另一个URL并按Enter键.
所有这些操作都会生成beforeunload
事件window
,而不会提供有关该事件的更多确切信息.
若要在执行上述操作时显示确认对话框,并在单击超链接时不显示,请按照下列步骤操作:
将beforeunload
事件侦听器分配给window
,它将确认文本作为字符串返回,除非将特定变量(标志)设置为true
.
将click
事件分配给document
.检查是否a
已单击元素(event.target.tagName
).如果是,请将标志设置为true
.
您还应该通过分配submit
事件侦听器来处理表单提交document
.
您的代码可能如下所示:
let disableConfirmation = false;
window.addEventListener('beforeunload', event => {
const confirmationText = 'Are you sure?';
if (!disableConfirmation) {
event.returnValue = confirmationText; // Gecko, Trident, Chrome 34+
return confirmationText; // Gecko, WebKit, Chrome <34
} else {
// Set flag back to false, just in case
// user stops loading page after clicking a link.
disableConfirmation = false;
}
});
document.addEventListener('click', event => {
if (event.target.tagName.toLowerCase() === 'a') {
disableConfirmation = true;
}
});
document.addEventListener('submit', event => {
disableConfirmation = true;
});
Try clicking the link or the submit button. The confirmation dialog won't be displayed.
Try reloading the frame (right click -> "Reload frame" in Chrome). You will see a confirmation dialog.