十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

javascript中beforeunload事件及DOMContentLoaded事件应方法及实例

百恒网络 2016-12-30 1182

在做H5开过程中,交互响应事件是经常要用到的,前面我们通过《contextmenu事件在H5中应方法及实例》介绍了contextmenu事件在H5中的应用,接下由南昌APP开发公司百恒网络技术人员向大家介绍beforeunload 事件和DOMContentLoaded事件。

1.beforeunload 事件

之所以有发生在 window 对象上的 beforeunload 事件,是为了让开发人员有可能在页面卸载前 阻止这一操作。这个事件会在浏览器卸载页面之前触发,可以通过它来取消卸载并继续使用原有页面。 但是,不能彻底取消这个事件,因为那就相当于让用户无法离开当前页面了。为此,这个事件的意图是 将控制权交给用户。显示的消息会告知用户页面行将被卸载(正因为如此才会显示这个消息),询问用 户是否真的要关闭页面,还是希望继续留下来如图所示。 为了显示这个弹出对话框,必须将 event.returnValue 的值设置为要显示给用户的字符串(对 IE及 Fiefox而言),同时作为函数的值返回(对 Safari和 Chrome而言),如下面的例子所示。

EventUtil.addHandler(window, "beforeunload", function(event){

event = EventUtil.getEvent(event);

var message = "I'm really going to miss you if you go.";

event.returnValue = message;

return message;

});

IE和 Firefox、Safari和 Chrome都支持 beforeunload 事件,也都会弹出这个对话框询问用户是否 真想离开。Opera 11及之前的版本不支持 beforeunload 事件。

DOMContentLoaded 事件 如前所述,window 的 load 事件会在页面中的一切都加载完毕时触发,但这个过程可能会因为要 加载的外部资源过多而颇费周折。而 DOMContentLoaded 事件则在形成完整的 DOM树之后就会触发, 不理会图像、JavaScript 文件、CSS 文件或其他资源是否已经下载完毕。与 load 事件不同, DOMContentLoaded 支持在页面下载的早期添加事件处理程序,这也就意味着用户能够尽早地与页面 进行交互。 要处理 DOMContentLoaded 事件,可以为 document 或 window 添加相应的事件处理程序(尽管 这个事件会冒泡到 window,但它的目标实际上是 document)。来看下面的例子。

EventUtil.addHandler(window, "DOMContentLoaded", function(event){

alert("Content loaded.");

});


2.DOMContentLoaded 事件

对象不会提供任何额外的信息(其 target 属性是 document)。 IE9+、Firefox、Chrome、Safari 3.1+和 Opera 9+都支持 DOMContentLoaded 事件,通常这个事件 既可以添加事件处理程序,也可以执行其他 DOM操作。这个事件始终都会在 load 事件之前触发。 对于不支持 DOMContentLoaded 的浏览器,我们建议在页面加载期间设置一个时间为 0毫秒的超 时调用,如下面的例子所示。

setTimeout(function(){

//在此添加事件处理程序

}, 0);

这段代码的实际意思就是:“在当前 JavaScript 处理完成后立即运行这个函数。”在页面下载和构建 期间,只有一个 JavaScript 处理过程,因此超时调用会在该过程结束时立即触发。至于这个时间与 DOMContentLoaded 被触发的时间能否同步,主要还是取决于用户使用的浏览器和页面中的其他代码。 为了确保这个方法有效,必须将其作为页面中的第一个超时调用;即便如此,也还是无法保证在所有环 境中该超时调用一定会早于 load 事件被触发。

本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络http://www.jxbh.cn/如转载请注明出处!


400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×