onunload对应的js代码为什么不能执行?和onbeforeunload的区别?
为什么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的区别?的更多相关文章
- UpdatePanel中用后台CS代码调用JS代码,先执行控件事件,后触发JS
引用地址: http://www.cnblogs.com/silenkee/articles/1609831.html 页面中加入了UpdatePanel后,Response.Write(&quo ...
- JS代码放在head和body中的区别分析
最近一直在忙工作,没有时间来写博客了,不过今天做网站的时候碰到一个问题就是JS脚本存放的位置不同其效果不同.起初我没在意这个问题,后来一直解决不了,通过上网与查资料问同事,终于我明白了,原来我碰到了这 ...
- php课程 1-3 web项目中php、html、js代码的执行顺序是怎样的(详解)
php课程 1-3 web项目中php.html.js代码的执行顺序是怎样的(详解) 一.总结 一句话总结:b/s结构 总是先执行服务器端的先.js是客户端脚本 ,是最后执行的.所以肯定是php先执行 ...
- js 如何保存代码段并执行以及动态加载script
1.模块化开发 通常使用的是 export和import 实现代码的共享和导入 2.特殊情况下需要将代码段作为参数传递 可以使用function 的toString方法将整合函数和里面的代码批量转化为 ...
- js解析器的执行原理
首先看一段代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- JS引擎线程的执行过程的三个阶段(一)
浏览器首先按顺序加载由<script>标签分割的js代码块,加载js代码块完毕后,立刻进入以下三个阶段,然后再按顺序查找下一个代码块,再继续执行以下三个阶段,无论是外部脚本文件(不异步加载 ...
- WinForm程序执行JS代码的多种方法以及使用WebBrowser与JS交互
方法一 使用微软官方组件Interop.MSScriptControl 1.msscript.ocx下载的地址 http://www.microsoft.com/downloads/details ...
- UIWebView中Html中用JS调用OC方法及OC执行JS代码
HTML代码: <html> <head> <title>HTML中用JS调用OC方法</title> <meta http-equiv=&quo ...
- ASP.NET后台执行JS代码
1. 用Response.Write方法 代码如下:Response.Write("<script type='text/javascript'>alert("XXX& ...
随机推荐
- Python机器学习笔记:SVM(1)——SVM概述
前言 整理SVM(support vector machine)的笔记是一个非常麻烦的事情,一方面这个东西本来就不好理解,要深入学习需要花费大量的时间和精力,另一方面我本身也是个初学者,整理起来难免思 ...
- Java实现 LeetCode 655 输出二叉树(DFS+二分)
655. 输出二叉树 在一个 m*n 的二维字符串数组中输出二叉树,并遵守以下规则: 行数 m 应当等于给定二叉树的高度. 列数 n 应当总是奇数. 根节点的值(以字符串格式给出)应当放在可放置的第一 ...
- Java实现统计方案
统计方案 题目描述 在一无限大的二维平面中,我们做如下假设: 1.每次只能移动一格: 2.不能向后走(假设你的目的地是"向上",那么你可以向左走,可以向右走,也可以向上走,但是不可 ...
- Java实现 LeetCode 149 直线上最多的点数
149. 直线上最多的点数 给定一个二维平面,平面上有 n 个点,求最多有多少个点在同一条直线上. 示例 1: 输入: [[1,1],[2,2],[3,3]] 输出: 3 解释: ^ | | o | ...
- Java实现 LeetCode 42 接雨水
42. 接雨水 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图,在这 ...
- Java中抽象类与接口的详细说明
首先简单的介绍一下抽象类: 定义是很简单的,我们这里不写官方的语言,我自己看着都烦,我们就用白话介绍,抽象类本质是一个类,没问题,那么类里面一般都是有方法的,方法包括方法名和方法体,这是常识对不对,那 ...
- opencl(2)平台、设备、上下文的获取与信息获取
1:平台 1)获取平台id cl_int clGetPlatformIDs( cl_uint num_entries, //想要获取的平台数 cl_platform_id * flatfor ...
- 关于thinkhphp3.1中废弃 preg_replace /e 修饰符
警告:preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead 网上查了下 发现 php5.5版 ...
- jmeter录制app测试脚本
1.jmeter 下载地址 https://jmeter.apache.org 2.选择下载包 3.下载完成后解压即可使用(也可以配置环境变量,但我一般不配置,可以使用) 4.打开jmeter 创建线 ...
- startActivityForResult调用另外一个Activity获取返回结果
startActivityForResult(intent,requestCode)可以调用另外一个Activity,并返回结果. 换头像案例 activity_main.xml <?xml v ...