如何防止closures浏览器窗口?

我试过下面的代码,在closures浏览器窗口时得到一个提醒:

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?"; } 

它的工作原理,但如果页面包含一个超链接,单击该超链接引发相同的警报。 我只有在closures浏览器窗口而不是点击超链接时才需要显示警报。

保持你的代码原样,并使用jQuery来处理链接:

 $(function () { $("a").click(function { window.onbeforeunload = null; }); }); 

另一个实现是你可以在这个网页中find它: http : //ujap.de/index.php/view/JavascriptCloseHook

 <html> <head> <script type="text/javascript"> var hook = true; window.onbeforeunload = function() { if (hook) { return "Did you save your stuff?" } } function unhook() { hook=false; } </script> </head> <body> <!-- this will ask for confirmation: --> <a href="http://google.com">external link</a> <!-- this will go without asking: --> <a href="anotherPage.html" onClick="unhook()">internal link, un-hooked</a> </body> </html> 

它所做的就是使用一个variables作为标志。

您可以检测到超链接点击,但不能确定用户:

  • 试图刷新页面。
  • 试图closures浏览器选项卡。
  • 试图closures浏览器窗口。
  • 在URL栏中input另一个URL,然后回车。

所有这些操作beforeunloadwindow上生成beforeunload事件,而没有任何更确切的事件信息。

为了在执行上述操作时显示确认对话框,并在单击超链接时不显示它,请按照下列步骤操作:

  • beforeunload事件侦听器指派给windowwindow将确认文本作为string返回, 除非特定variables(标志)设置为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; }); 
 <p><a href="https://stacksnippets.net/">google.com</a></p> <form action="https://stacksnippets.net/"><button type="submit">Submit</button></form> <p>Try clicking the link or the submit button. The confirmation dialog won't be displayed.</p> <p>Try reloading the frame (right click -> "Reload frame" in Chrome). You will see a confirmation dialog.</p>