使用OnBeforeUnload JavaScript事件

cxygs5788

于 2020-05-22 12:26:31 发布

阅读量566

点赞数

文章标签： javascript ViewUI

介绍

我已经看到许多有关如何禁用浏览器后退按钮的问题，过去我回答过“这根本不可能”。无论如何，禁用后退按钮不是一个好主意，如果用户冒险离开您的页面，那么他们将无法使用此按钮。

人们问如何控制或禁用“后退”按钮的主要原因是因为他们需要控制敏感（和/或）动态Web内容。例如，他们可能试图确保用户注销后，点击浏览器的“后退”按钮将不会显示任何敏感数据。或是他们试图确保当用户点击后退按钮时不会丢失用户的工作。

请注意，目前，Opera Web浏览器不支持OnBeforeUnload事件 window.onbeforeunload（）事件

即将卸载网页之前，将触发JavaScript window.onbeforeload（）事件。这使我们能够确保用户确定要离开他们正在查看的页面。

关于此事件的独特之处在于，如果处理该事件的函数返回任何内容（“ true”，“ false”，“ null” ...一个字符串...任何内容），浏览器将显示一个确认提示窗口，说明：

您确定要离开此页面吗？
按确定继续，或按取消保留在当前页面上。

因此，例如，如果您只想显示一个确认框，询问用户是否真的要离开您的页面，则可以添加：


<script type="text/javascript">
     window.onbeforeunload = function(){ return;}
</script>

如果您从处理onbeforeload事件的函数返回一个字符串，那么它将像这样插入到提示中：

您确定要离开此页面吗？
您返回的字符串在这里
按确定继续，或按取消保留在当前页面上。

在这种情况下，您将拥有JavaScript ：


<script type="text/javascript">
     window.onbeforeunload = function(){ return 'Your Returned String Goes Here';}
</script>

如果用户单击“取消”按钮，则不会执行卸载事件，并且它们将保留在页面上，否则将被允许离开并清除其缓存。

为了防止出现确认框，请不要在函数中添加“返回”。

例如。


<script type="text/javascript">
     window.onbeforeunload = function(){}
</script>

请记住，每次要卸载页面时都会触发window.onbeforeunload事件。这意味着，如果用户单击页面上的按钮，并且页面发布回服务器，则将触发window.onbeforeunload事件。在开发处理window.onbeforeunload事件的函数时，请考虑到这一点。结论

window.onbeforeunload事件是确保用户确定离开网页的后果的一种好方法。

要记住的重要一点是，如果处理onbeforeunload事件JavaScript函数完全返回任何内容，则无论返回什么，都会自动显示一个确认框。为了防止出现确认框，请不要在函数中添加“返回”。

另外，要注意的另一件事是，每次要卸载页面时都会触发onbeforeunload事件。

在处理此事件JavaScript函数中，您可以执行任何所需的操作。例如，如果他们离开了，您可以进行Ajax调用以向服务器指示应该注销用户...或应该清除资源....或记录您真正想要的任何内容。

请注意，目前，Opera网络浏览器不支持OnBeforeUnload事件

我希望这篇小文章对您有所帮助。编码愉快！

-弗林尼

关注