为什么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 如何保存代码段并执行以及动态加载script

    1.模块化开发 通常使用的是 export和import 实现代码的共享和导入 2.特殊情况下需要将代码段作为参数传递 可以使用function 的toString方法将整合函数和里面的代码批量转化为 ...

  5. js解析器的执行原理

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

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

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

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

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

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

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

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

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

随机推荐

  1. Java实现 LeetCode 789 逃脱阻碍者(曼哈顿距离)

    789. 逃脱阻碍者 你在进行一个简化版的吃豆人游戏.你从 (0, 0) 点开始出发,你的目的地是 (target[0], target[1]) .地图上有一些阻碍者,第 i 个阻碍者从 (ghost ...

  2. Java实现 LeetCode 8 字符串转换整数(atoi)

    8. 字符串转换整数 (atoi) 请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非 ...

  3. Java实现 蓝桥杯 算法提高 快速排序

    试题 算法提高 快速排序 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 用递归来实现快速排序(quick sort)算法.快速排序算法的基本思路是:假设要对一个数组a进行排序,且a ...

  4. java实现机器人行走

    某少年宫引进了一批机器人小车.可以接受预先输入的指令,按指令行动.小车的基本动作很简单,只有3种:左转(记为L),右转(记为R),向前走若干厘米(直接记数字). 例如,我们可以对小车输入如下的指令: ...

  5. RPM包管理-yum在线管理

    常用yum命令 查询 查询所有可用软件包列表,yum list 搜索所有和关键字相关的软件包,yum search 关键字 安装 yum -y install 包名,其中,-y 表示自动回答yes 升 ...

  6. 【asp.net core 系列】6 实战之 一个项目的完整结构

    0. 前言 在<asp.net core 系列>之前的几篇文章中,我们简单了解了路由.控制器以及视图的关系以及静态资源的引入,让我们对于asp.net core mvc项目有了基本的认识. ...

  7. 滴滴HBase大版本滚动升级之旅

    桔妹导读:滴滴HBase团队日前完成了0.98版本 -> 1.4.8版本滚动升级,用户无感知.新版本为我们带来了丰富的新特性,在性能.稳定性与易用性方便也均有很大提升.我们将整个升级过程中面临的 ...

  8. ODEINT 求解常微分方程(2)

    import numpy as np from scipy.integrate import odeint import matplotlib.pyplot as plt # function tha ...

  9. IDEA自定义模板

    RT,虽然看起来简单,每当配置新的IDEA 时,又不免度娘,所以整理下 1.类的模板 路径: settings-Editor-File and Code Templates 右侧找到 class 添加 ...

  10. 浏览器端如何使用VConsole.js调试代码?

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...