为什么onunload对应的js代码不能执行?

为什么onbeforeunload才可以在离开页面时执行相应的js代码?

1.onunload和onbeforeunload都是在离开页面或者刷新页面的时候才会调用的,他们是写在body开始标签里面或者script中写成window.onload或者window.onbeforeunload的样子

2.onbeforeunload是服务器去准备拿新的页面调用的,onunload是已经到服务器里面拿到了新的页面,替换当前的页面时调用的

3.onbeforeload是在onunload之前调用的,也就是说你想要在页面关闭时或者刷新时看到想要的效果,就应该写在onbeforeunload里面,因为onunload是看不到效果的(我试了在谷歌,火狐,ie里面来执行一个警告框代码),看不到这个效果,但是写在console.log里面确实是执行了onunload对应的js代码

4.页面在加载中只调用onload事件

5.页面在离开时的调用的顺序是:先onbeforeload后onunload

6.页面在刷新的时候调用的顺序:先onbeforeunload再onunload后onload

7.我认为的onunload调用,既然是新页面替换当前页面时才调用的话,那当前页面的onunload对应的js代码应该是不被执行的,或者说是执行了但是由于替换成新的页面了,所以就看不出效果,但是你想要检验的话,写在conlose.log里面是可以看到onunload事件有没有被执行,是被执行的。

下面我检测了火狐、谷歌、ie11版本对onunload事件的反应

上代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style>p{cursor:pointer;}</style>
</head>
<body onload="load();" onbeforeunload="return fore()" >
<h2>窗口事件是针对于整个窗口而言</h2>
<p>onload事件句柄和onunload事件句柄直接写在body内,写在script中前面要加window</p>
<p onclick="alert('我在文档加载之后,也就是打开窗口之后等到页面静态信息全部展示之后,做了单击我这样一个行为才有的效果');">单击我</p>
<script type="text/javascript">
function load()
{alert("文档加载时,欢迎访问本页面");} function ms()
{alert("当文档关闭时或者跳转到别的页面时候的会触发onunload事件句柄");
}

window.onunload = function(){
console.log("退出时触发");
20 } function fore()
{var message="确定离开";
return message;
26 } </script>
<a href="http://www.baidu.com">1</a> </body>
</html>

谷歌浏览器在刷新的时候可以看到一瞬间的“退出时触发”,然后消失

火狐在刷新和跳转页面都可以看到“退出时触发”

ie上面只有跳转的时候才会触发onunload

这里说一下,像alert这些框写在onunload里面是看不到效果的,不知道是什么原因?不知道可不可以这样理解:因为onunload是在替换页面时才调用的,所以原先的页面的onunload对应的js代码就会被释放,就看不到。但是写在控制台里面是能够看到效果的。onbeforeunload是在onunload之前被调用的

onunload对应的js代码为什么不能执行?和onbeforeunload的区别?的更多相关文章

  1. UpdatePanel中用后台CS代码调用JS代码,先执行控件事件,后触发JS

    引用地址: http://www.cnblogs.com/silenkee/articles/1609831.html   页面中加入了UpdatePanel后,Response.Write(&quo ...

  2. JS代码放在head和body中的区别分析

    最近一直在忙工作,没有时间来写博客了,不过今天做网站的时候碰到一个问题就是JS脚本存放的位置不同其效果不同.起初我没在意这个问题,后来一直解决不了,通过上网与查资料问同事,终于我明白了,原来我碰到了这 ...

  3. php课程 1-3 web项目中php、html、js代码的执行顺序是怎样的(详解)

    php课程 1-3 web项目中php.html.js代码的执行顺序是怎样的(详解) 一.总结 一句话总结:b/s结构 总是先执行服务器端的先.js是客户端脚本 ,是最后执行的.所以肯定是php先执行 ...

  4. js解析器的执行原理

    首先看一段代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  5. JS引擎线程的执行过程的三个阶段(一)

    浏览器首先按顺序加载由<script>标签分割的js代码块,加载js代码块完毕后,立刻进入以下三个阶段,然后再按顺序查找下一个代码块,再继续执行以下三个阶段,无论是外部脚本文件(不异步加载 ...

  6. WinForm程序执行JS代码的多种方法以及使用WebBrowser与JS交互

    方法一 使用微软官方组件Interop.MSScriptControl 1.msscript.ocx下载的地址   http://www.microsoft.com/downloads/details ...

  7. UIWebView中Html中用JS调用OC方法及OC执行JS代码

    HTML代码: <html> <head> <title>HTML中用JS调用OC方法</title> <meta http-equiv=&quo ...

  8. ASP.NET后台执行JS代码

    1. 用Response.Write方法 代码如下:Response.Write("<script type='text/javascript'>alert("XXX& ...

  9. 在Java中执行js代码

    在某些特定场景下,我们需要用Java来执行Js代码(如模拟登录时,密码被JS加密了的情况),操作如下: ScriptEngineManager mgr = new ScriptEngineManage ...

  10. A标签执行js 代码和跳转

    5.执行JS代码: <a href="javascript:js代码">内容</a> ⑥.使用js来实现空链接 写法:<a href="ja ...

随机推荐

  1. git 提交空文件夹

    git不能提交空文件夹 find . -type d -empty -execdir touch {}/.gitkeep \; -type -d 搜索文件夹 -empty 只搜索空文件夹 -execd ...

  2. C#中操作刚导出的Excel,设置其为自动调整列宽

    [问题] 用C#导出数据为excel,但是导出的数据中,不是自动调整列宽的: 希望变成这样的: [解决过程] 1.参考: 在C#里对excel文件的列宽进行操作 去试试: //auto adjust ...

  3. [译]在 64bit 环境中执行32 bit的SSIS包

    最近碰到了一个众所周知的32bit的 SSIS 包在64bit的SQL Server环境的执行问题. 我看了一些解决方案,比如修改在SSDT里面修改 debug 选项(Run64BitRuntime ...

  4. JS预览图像将本地图片显示到浏览器上

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  5. LVS-1

    lvs 再调度上非常出色,能处理400万的并发: 在功能上不足,需要其他软件的支持.

  6. 《剑指offer》-递增数组中找到和为S的(最小)两个元素

    题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述: 对应每个测试案例,输出两个数,小的先输出. 首先 ...

  7. (树莓派、Arduino、物联网、智能家居、机器人)传感器、机械装置、电子元件

    定制 PCB 1. 机械类 履带底盘 2. 传感器 温度传感器(temperature).湿度传感器(humidity) DHT11/DHT22 驱动:BCM2835 (被动)红外传感器(Passiv ...

  8. C#写文本文件,如何换行(添加换行符)

    把文本写到文件中,如果是几段文字拼合起来输出到文件中,通常每段非结尾文字后需要添加换行符,不然几段文字都变成一段. 在 C# 中,文本换行有两种方法,一种在需要换行的文本后面添加换行符 \r\n 即可 ...

  9. 在Powerdesigner中创建概念数据模型

    点击菜单“File”---->“New Model” 点击[OK]按钮后,将进入如下的画面 系统将出现一个工具栏如下,用于在设计面板中设计模型

  10. C++ STL:lower_bound与upper_bound实现

    lower_bound lower_bound(begin, end, target)用来查找一个已排序的序列中[begin, end)第一个大于等于target的元素index.数组A如下: val ...