window属性onbeforeunload语法教程示例

 更新时间:2023年07月19日 09:32:32   作者:w3cschool  
这篇文章主要为大家介绍了window属性onbeforeunload语法教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

onbeforeunload属性

WindowEventHandlers.onbeforeunload事件处理程序属性包含在发送beforeunload时执行的代码。这个事件在窗口即将到达unload(卸载)其资源时触发。该文件仍然可见,并且该事件仍可取消。

注意:为了防止不需要的弹出窗口,一些浏览器不会显示在beforeunload事件处理程序中创建的提示,除非该页面已与之交互;有些根本不显示它们。

onbeforeunload属性语法

window.onbeforeunload = funcRef
  • funcRef是对函数或函数表达式的引用。
  • 该函数应该为Event对象的returnValue属性分配一个字符串值并返回相同的字符串。

onbeforeunload属性示例

window.onbeforeunload = function(e) {
  var dialogText = 'Dialog text here';
  e.returnValue = dialogText;
  return dialogText;
};

笔记

当此事件返回(或将returnValue属性设置为)除null或者undefined之外的值时,系统将提示用户确认页面卸载。在某些浏览器中,事件的返回值显示在此对话框中。从Firefox 4,Chrome 51,Opera 38和Safari 9.1开始,将显示一个不受网页控制的通用字符串,而不是返回的字符串。

例如:

  • Firefox显示字符串“此页面要求您确认您要离开 - 您输入的数据可能无法保存。” 
  • Chrome会显示字符串“您想离开本网站吗?您所做的更改可能无法保存”;
  • Internet Explorer不尊重null返回值,并将其作为“null”文本显示给用户。您必须使用undefined跳过提示。

自2011年5月25日,调用到HTML5规范状态的window.alert(),window.confirm()和window.prompt()方法可以在此事件中被忽略。

另请注意,各种浏览器忽略事件的结果,并且根本不要求用户进行确认。该文件将始终自动卸载。Firefox在about:config中有一个名为dom.disable_beforeunload的开关来启用此行为。

你可以并且应该通过window.addEventListener()和beforeunload事件来处理此事件。

绑定到此事件可用于防止浏览器在JavaScript呈现内容的情况下完全缓存页面。在某些情况下,当为了填充内容而返回到已执行javascript的页面时,您可能会发现返回时返回访问时JavaScript没有运行。如果window.onbeforeunload已被绑定(并因此在离开该页面时触发),则页面中的javascript将在随后的回访中被触发并因此更新内容。

规范

该事件最初由Microsoft在Internet Explorer 4中引入,并在HTML5规范中进行了标准化。

规范状态注释

HTML Living Standard 

该规范中的'GlobalEventHandlers'的定义。

Living Standard

HTML 5.1 

该规范中的'GlobalEventHandlers'的定义。

Recommendation

HTML5 

该规范中的'GlobalEventHandlers'的定义。

Recommendation

浏览器兼容性

希望能够有所帮助~

以上就是window属性onbeforeunload语法教程示例的详细内容,更多关于window属性onbeforeunload语法的资料请关注脚本之家其它相关文章!

相关文章

  • javascript对象3个属性特征

    javascript对象3个属性特征

    这篇文章主要介绍了javascript对象3个属性特征,writable可写、enumerable可枚举、configurable可配置,下面来看看文章的详细内容吧
    2021-11-11
  • JavaScript集成公式编辑器示例详解

    JavaScript集成公式编辑器示例详解

    这篇文章主要为大家介绍了JavaScript集成公式编辑器示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 微信小程序 action-sheet 反馈上拉菜单简单实例

    微信小程序 action-sheet 反馈上拉菜单简单实例

    这篇文章主要介绍了微信小程序 action-sheet 反馈上拉菜单简单实例的相关资料,需要的朋友可以参考下
    2017-05-05
  • Canvas如何判断点在形状内及内置API性能详解

    Canvas如何判断点在形状内及内置API性能详解

    这篇文章主要为大家介绍了Canvas如何判断点在形状内及内置API性能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • JavaScript中直接写undefined的错误及用法剖析

    JavaScript中直接写undefined的错误及用法剖析

    这篇文章主要介绍了JavaScript中直接写undefined的用法剖析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 微信小程序 选择器(时间,日期,地区)实例详解

    微信小程序 选择器(时间,日期,地区)实例详解

    这篇文章主要介绍了微信小程序 选择器(时间,日期,地区)实例详解的相关资料,这里提供了实例代码及实现效果图,帮助大家学习理解这部分知识,需要的朋友可以参考下
    2016-11-11
  • JavaScript内置对象介绍

    JavaScript内置对象介绍

    这篇文章主要介绍了JavaScript内置对象,内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能,下面我们一起进入文章了解更多详细内容
    2021-12-12
  • 前端算法题解 leetcode50-Pow(x, n)

    前端算法题解 leetcode50-Pow(x, n)

    这篇文章主要为大家介绍了前端算法题解 leetcode50-Pow(x, n)示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • JS的深浅复制详细

    JS的深浅复制详细

    这篇文章主要介绍JS的深浅复制,之所以会出现深浅拷贝的问题,实质上是由于JS对基本类型和引用类型的处理不同。下面感兴趣的小伙伴请跟小编一起来学习吧
    2021-10-10
  • JS面试异步模拟红绿灯实现详解

    JS面试异步模拟红绿灯实现详解

    这篇文章主要为大家介绍了JS面试异步模拟红绿灯实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01

最新评论