onpagehide、onunload 和 onpageshow、onload事件疑惑

今天在最新版本chrome浏览器中测试在什么情况下会触发onpagehide、onunload事件(点击一个链接,刷新页面,提交表单,关闭浏览器等)。测试代码粘贴如下:

<!DOCTYPE html>
<html lang=‘en‘>
<head>
<title>测试</title>
<meta charset=‘utf-8‘>
<script type="text/javascript">
function onpageshowfunc() {
alert("onpageshow()");
}
function onloadfunc() {
alert("onloadfunc()");
}
function onunloadfunc() {
console.log("2222222222");
alert("onunloadfunc()");
}
function onpagehidefunc() {
console.log("111111111");
alert("onpagehide()");
}
</script>
</head>
<body onunload="onunloadfunc()" onpagehide="onpagehidefunc()" onpageshow="onpageshowfunc()" >
<a href="http://www.baidu.com">test link baidu</a>
</body>
</html>

结果意外发现:

1、onpagehide onunload事件是在销毁页面对象后触发的,onbeforeunload是在销毁页面对象前触发的 ,此时alert()方法已经被锁定销毁了,因而一直不能弹出提示框了,后来断点提示一个错误输出“Blocked alert(‘onpagehide()‘) during pagehide.”。“Blocked alert(‘onunloadfunc()‘) during unload.”

2、onpagehide比onunload先触发。

3、onload比onpageshow先触发。

以上仅自己结论,欢迎指正。

时间: 2024-11-07 20:06:43

onpagehide、onunload 和 onpageshow、onload事件疑惑的相关文章

浏览器返回按钮不会触发onLoad事件

最近在做一个移动端项目,发现移动端某些返回和PC端是有差异的, 比如ios中返回按钮是直接使用缓存的, 不会执行任何js代码, 这个问题很蛋疼, 例如, 在提交的时候将按钮设置为loading状态, 如果在提交成功后没有对安装进行处理, 那么返回后按钮依然是loading状态, 这种体验很差, 如下图: 此问题是由于某些浏览器在back的时候是直接使用的之前的视图,页面没有进行重新加载而导致的,在网上找了些资料, 发现这是H5的一些新特性Back-Forward Cache(简称bfcache)

共享onload事件

在做前端工作中,我们想要设置某个函数prepare,让它在网页加载完毕后执行,会触发一个onload事件,这个事件与windows对象相关联,必须把prepare函数绑定到这个时间上,语法如下:window.onload=prepare; 这个方法可以解决我的问题,但是,如果我有两个函数firstfunc和secondfunc,我想让他们两个都在页面加载完成后得到执行,我该怎么做呢? window.onload=firstfunc; window.onload=secondfunc; 像这样逐一

jQuery的document ready与 onload事件——你真的思考过吗?

在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是document.onload? 4. document ready到底是什么ready,DOM渲染完成? 5. jQuery怎么实现$(document).ready? 6. jQuery的ready,还能ready什么? 7. jQuery的document ready就一定比window.onlo

onload事件的加载

frmAttachment.Form.ExecFunction(frmAttachment.Form.OnLoad,[null,null]);// onload事件必须有两个参数,所以这个地方穿两个null,也可以传别的东西,但是必须传入两个参数.; frmAttachment.Form.formArguments = ["MICHAEL_USERS", origrec];// 事实上,控制窗体不重新加载的两个变量是form.variables["relatedorigrec

IE IE8 iframe的onload方法分析 IE浏览器onload事件失效

判断iframe是否加载完成的完美方法 IE 支持 iframe 的 onload 事件,不过是隐形的,需要通过 attachEvent 来注册. 第二种方法比第一种方法更完美(采用readystatechange判断),因为 readystatechange 事件相对于 load 事件有一些潜在的问题. 这里感觉说的并不是完全准确,开始给我造成了很大的困扰.看其代码才明白,真正意义上来讲IE在创建一个新的iframe时的onload方法需要使用attachEvent来绑定,而原来就存在的ifr

【JS】怎样同一时候处理多个window.onload事件

有时引用其他js时,其js却使用了window.onload事件,这种话,引入的页面的onload事件就有可能执行不了.如何才干两个都执行呢?除了将两个写到一块儿去的方法外,还有其他的方法 if(window.onload!=null){ eval("theOldFun="+window.onload.toString()); window.onload=function(){theOldFun();addReadResource();}; } eval()函数的作用: 它的功能是把相

onload事件追加函数

一个html文件只能有一个onload事件,当onload事件触发时需要执行多个函数是,就要向onload事件里追加函数. function addLoad(fn){ var oldload=window.onload; if(typeof window.onload!= "function"){ window.onload=fn; }else { window.onload=function(){ oldload(); fn(); } } }

JavaScript 中 onload 事件如何绑定多个方法

页面加载完毕时会触发 onload 事件.基于内容(HTML)要与行为(JavaScript)分离的编码思想,我们需要将一些对页面的初始化操作写在方法内,并通过window.onload = functionName 调用这些方法.需要调用多个方法时,若使用 window.onload = functionA; window.onload = functionB;,它们之中只有最后一个方法会被实际调用.那么应如何实现调用多个方法呢? 直接在 HTML 中编写: <body onload="

window onload 与 img onload事件

通常,window.onload就是加载完dom之后执行的.而img就是加载完图片完执行它的onload事件,根据img的src是否加载完成. 因此,看下面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http