liuzidong
- 浏览: 2290161 次
- 性别:
- 来自: 成都
-
文章分类
- 全部博客 (357)
- J2EE (49)
- JavaScript (40)
- Spring (19)
- Struts (5)
- CSS (8)
- Hibernate (16)
- Java (67)
- DWR (4)
- JSON (3)
- XFIRE (1)
- Tomcat (1)
- Ant (2)
- 设计模式 (2)
- 经典收藏 (2)
- JSP (10)
- Linux (0)
- WebLogic (11)
- myeclipse (13)
- Buffalo (4)
- 文件上传相关 (1)
- oracle (33)
- html (6)
- JSTL (3)
- SVN (2)
- GIT (1)
- 孙卫琴（Java网络编程精解） (1)
- DOM4J (2)
- Swing (1)
- AJAX (1)
- Eclipse (5)
- 日志组件 (3)
- PowerDesigner (1)
- Jquery (22)
- IT技术开发相关网址 (1)
- Nutz (1)
- 其它 (1)
- Velocity (3)
- WebService (1)
- MySql (2)
- Android (1)
- Maven (2)
- Quartz (11)
- Lucene (1)
- springsource (1)
- Junit (1)
- Activiti (0)
最新评论
-
yzlseu：
拼凑，没有营养
Activiti进阶—分配组任务 -
zhangsenhao：
非常赞！代码很清楚
SpringMVC3.0+MyIbatis3.0(分页示例) -
xiamw2000：
分页写得不对，应该是 ： order by ${orderNa ...
SpringMVC3.0+MyIbatis3.0(分页示例) -
sheertewtw：
...
SpringMVC:上传与下载 -
kingtoon：
...
XSS之xssprotect
声明:网上收集
Onload,Onunload和onbeforeunload方法的异同
一 二种方法比较
1 onload的意思是当页面加载完毕的时候执行.
2 相同点:Onunload,onbeforeunload都是在刷新或关闭时调用
3 不同点:Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取,而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的.Onbeforeunload可以做到,onbeforeunload在onunload之前执行，它还可以阻止onunload的执行.
二 事件描述
1 onbeforeunload事件：
说明：目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持.
描述：事件触发的时候弹出一个有确定和取消的对话框，确定则离开页面，取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。
触发于：
•关闭浏览器窗口
•通过地址栏或收藏夹前往其他页面的时候
•点击返回，前进，刷新，主页其中一个的时候
•点击 一个前往其他页面的url连接的时候
•调用以下任意一个事件的时候：
click,document write,document open,document close，window close,window navigate,window NavigateAndFind,location,replace,location reload,form submit.
•当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
•重新赋予location.href的值的时候。
•通过input type=”submit”按钮提交一个具有指定action的表单的时候。
可以用在以下元素：
•BODY, FRAMESET, window
平台支持：
IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+
2 onunload事件
描述：当用户关闭一个页面时触发 onunload 事件。
触发于：
•关闭浏览器窗口
•通过地址栏或收藏夹前往其他页面的时候
•点击返回，前进，刷新，主页其中一个的时候
•点击 一个前往其他页面的url连接的时候
•调用以下任意一个事件的时候：
Click,document write,document open,document close,window close,window navigate,window NavigateAndFind,location,replace,location reload,form submit.
•当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
•重新赋予location.href的值的时候。
•通过input type=”submit”按钮提交一个具有指定action的表单的时候。
示例说明:
google加载相册的原理:
一个页面加载最慢的往往是页面中的大图，在用google的Picasa 网络相册时,google会一共生成7种大小的缩略图存放在他的服务器上，然后在大图的浏览页，他会先加载一个缩略图
，然后等大图完全加载后再替换掉原来的缩略图，实现那种模糊到清晰的效果。
代码如下:
<body>
<img id="pic" src="small.jpg" />
</body>
<script type="text/javascript">
var p = new Image();
var loaded = false;
p.onload = p.onreadystatechange = function()
{
if (!loaded && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") )
{
document.getElemengtById('pic').src = 'big.jpg';
}
}
p.src="big.jpg";
window.onunload = function()
{
//alert('关闭页面');
}
window.onbeforeunload = function(e)
{
var n = window.event.screenX - window.screenLeft;
var b = n > document.documentElement.scrollWidth-20;
if(b && window.event.clientY < 0 || window.event.altKey)
{
//这里可以放置你想做的操作代码
// alert("关闭窗口");
}else{
// alert("刷新窗口");
}
或者这样：
event.returnValue="确定离开当前页面吗？";
}
</script>
这段代码就是判断触发onbeforeunload事件时，鼠标是否点击了关闭按钮，或者按了ALT+F4来关闭网页，如果是，则认为系统是关闭网页，否则在认为系统是刷新网页.
3 onload事件
onload的意思是当页面加载完毕的时候执行. 当某一事件被触发时需要执行某个函数，在IE下可用attachEvent，在FF下则要用addEventListener.
示例代码:
attachEvent()有两个参数，第一个是事件名称，第二个是需执行的函数；
addEventListener()有三个参数，第一个是事件名称，但与IE事件不同的是，事件不带"on",比如"onsubmit"在这里应为"submit"，第二个是需执行的函数，第三个参数为布尔值；
示例代码:
if (document.all){
window.attachEvent('onload',函数名)//IE中
}else{
window.addEventListener('load',函数名,false);//firefox
}
Onload,Onunload和onbeforeunload方法的异同
一 二种方法比较
1 onload的意思是当页面加载完毕的时候执行.
2 相同点:Onunload,onbeforeunload都是在刷新或关闭时调用
3 不同点:Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取,而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的.Onbeforeunload可以做到,onbeforeunload在onunload之前执行，它还可以阻止onunload的执行.
二 事件描述
1 onbeforeunload事件：
说明：目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持.
描述：事件触发的时候弹出一个有确定和取消的对话框，确定则离开页面，取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。
触发于：
•关闭浏览器窗口
•通过地址栏或收藏夹前往其他页面的时候
•点击返回，前进，刷新，主页其中一个的时候
•点击 一个前往其他页面的url连接的时候
•调用以下任意一个事件的时候：
click,document write,document open,document close，window close,window navigate,window NavigateAndFind,location,replace,location reload,form submit.
•当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
•重新赋予location.href的值的时候。
•通过input type=”submit”按钮提交一个具有指定action的表单的时候。
可以用在以下元素：
•BODY, FRAMESET, window
平台支持：
IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+
2 onunload事件
描述：当用户关闭一个页面时触发 onunload 事件。
触发于：
•关闭浏览器窗口
•通过地址栏或收藏夹前往其他页面的时候
•点击返回，前进，刷新，主页其中一个的时候
•点击 一个前往其他页面的url连接的时候
•调用以下任意一个事件的时候：
Click,document write,document open,document close,window close,window navigate,window NavigateAndFind,location,replace,location reload,form submit.
•当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。
•重新赋予location.href的值的时候。
•通过input type=”submit”按钮提交一个具有指定action的表单的时候。
示例说明:
google加载相册的原理:
一个页面加载最慢的往往是页面中的大图，在用google的Picasa 网络相册时,google会一共生成7种大小的缩略图存放在他的服务器上，然后在大图的浏览页，他会先加载一个缩略图
，然后等大图完全加载后再替换掉原来的缩略图，实现那种模糊到清晰的效果。
代码如下:
<body>
<img id="pic" src="small.jpg" />
</body>
<script type="text/javascript">
var p = new Image();
var loaded = false;
p.onload = p.onreadystatechange = function()
{
if (!loaded && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") )
{
document.getElemengtById('pic').src = 'big.jpg';
}
}
p.src="big.jpg";
window.onunload = function()
{
//alert('关闭页面');
}
window.onbeforeunload = function(e)
{
var n = window.event.screenX - window.screenLeft;
var b = n > document.documentElement.scrollWidth-20;
if(b && window.event.clientY < 0 || window.event.altKey)
{
//这里可以放置你想做的操作代码
// alert("关闭窗口");
}else{
// alert("刷新窗口");
}
或者这样：
event.returnValue="确定离开当前页面吗？";
}
</script>
这段代码就是判断触发onbeforeunload事件时，鼠标是否点击了关闭按钮，或者按了ALT+F4来关闭网页，如果是，则认为系统是关闭网页，否则在认为系统是刷新网页.
3 onload事件
onload的意思是当页面加载完毕的时候执行. 当某一事件被触发时需要执行某个函数，在IE下可用attachEvent，在FF下则要用addEventListener.
示例代码:
attachEvent()有两个参数，第一个是事件名称，第二个是需执行的函数；
addEventListener()有三个参数，第一个是事件名称，但与IE事件不同的是，事件不带"on",比如"onsubmit"在这里应为"submit"，第二个是需执行的函数，第三个参数为布尔值；
示例代码:
if (document.all){
window.attachEvent('onload',函数名)//IE中
}else{
window.addEventListener('load',函数名,false);//firefox
}
- Onunload和onbeforeunload方法的异同.rar (13.1 KB)
- 下载次数: 13
分享到：
发表评论
-
java json-lib & jQuery & jsonp
2016-06-30 11:31 832参考链接： 1、http://hanqunfeng.iteye ... -
JavaScript异步编程学习
2016-06-19 14:59 795一 JavaScript学习资源 1、Reg Braithwa ... -
jQuery图表（jqPlot,Highcharts）
2012-05-18 00:48 23567jQuery图表在http://www.oschina.net ... -
JavaScript中的arguments,callee,caller,call,appy [备忘]
2012-05-08 23:13 1626转载：JavaScript中的argume ... -
IE,FF获取文件绝对路径方法
2012-03-25 23:30 4994参考资料 1 解决Firefox3,IE7,IE8上传图片预览 ... -
My97DatePicker常用练习
2011-09-15 17:03 5155参考官网资料:http://www.m ... -
jQuery之实战(checkbox,table)
2011-08-19 16:22 3828实现功能如下：参考图片 1 页面加载时效果 2 全选效果 ... -
jQuery之checkbox(复选框)
2011-08-18 17:06 2109业务需求:经常在用户登记中有这样的东西,只选择其中一项或者多项 ... -
jQuery之radio(单选)
2011-08-18 15:41 2465页面代码如下： <inpu ... -
jQuery之DOM
2011-08-17 14:45 1484参考资料 1 跳蚤的小窝:)jQuery对象和DOM对象【jQ ... -
jQuery之入门(ready)
2011-08-17 11:46 2125参考资料 1 jquery $(document).ready ... -
IE下调试JS的小工具-CompanionJS
2011-08-02 13:12 1917参考资料 1 推荐一个IE下调试JS的小工具-Companio ... -
Frameset导致Cookies和Session丢失的原因及解决办法
2011-07-25 12:28 4375参考资料 1 Frameset导致Cookies和Sessio ... -
js获取html元素宽度的思考
2011-04-13 17:17 2505转载: js获取html元素宽度的思考 http://blog ... -
iframe自适应，跨域，JS的document.domain
2011-04-13 17:10 4764转载:iframe自适应，跨域 ... -
MIME帮助手册
2011-04-13 17:06 1394转载:MIME帮助手册 http://www.cnblogs ... -
Javascript:通用不间断滚动&省、市、地区联动选择JS封装类
2011-04-13 12:40 3599通用不间断滚动JS封装类&省、市、地区联动选择JS封装 ... -
JS:表格排序
2011-03-24 15:09 2827参考资料 js的table排序,支持多浏览器，多列同时排序，自 ... -
JavaScript CSS Style属性对照表
2011-03-14 16:41 1455转载:JavaScript CSS Style属 ... -
国人:JSON-RPC之初识
2011-03-14 15:20 3819相关链接 1 json-rpc-for-java http:/ ...
相关推荐
在本文中，我们将会探讨JavaScript中的两个非常重要的事件处理器：onload和onunload，以及它们的具体使用场景和示例。首先，让我们看看这两个事件处理器的作用。 在Web开发中，onload事件处理器通常被用于在页面...
页面刷新时先执行onbeforeunload，然后onunload，最后onload。 经过验证我得出的结论是： //对于ie，谷歌，360： //页面加载时只执行onload //页面刷新时，刷新之前执行onbeforeunload事件，在新页面即将替换旧页面...
总的来说，理解和熟练运用这些JavaScript方法，特别是`dojo.addOnLoad`和`onresize`事件，能够帮助你在Domino XPages开发中创建更智能、更适应用户行为的应用。同时，合理利用`<xp:scriptBlock>`控件能够使代码与...
JQuery onload、ready 方法详细解说 ...JQuery 的 onload 和 ready 方法都是在页面加载完成后触发的事件，但是它们之间有着一定的区别。在实际开发中，我们需要根据实际情况选择使用哪种事件，并注意其优点和缺点。
在网页开发中，`body.onload` 和 `window.onload` 是两个常见的JavaScript事件处理函数，用于在页面完全加载后执行特定的代码。它们都是用来确保在执行任何操作之前，页面的所有资源（包括HTML、CSS、JavaScript、...
标签只有onload\onunload\onbeforeunload事件，而没有onclose事件。不管页面是关闭还是刷新都会执行onunload事件。如何捕捉到页面关闭呢？ 页面加载时只执行onload 页面关闭时只执行onunload 页面刷新时先...
脱离document.onload和window.onload的onload事件，可多次添加加载事件！
2. 图片的尺寸获取：在onload事件处理程序中，可以通过访问Image对象的height和width属性来获取图片的实际尺寸。这对于图片自适应布局或是计算其他布局参数是很有帮助的。 3. 缓存对onload事件的影响：浏览器缓存...
字符实体是一种在HTML中表示特殊字符的方法，例如，通过"&#"和";"组合可以显示各种符号。在加载动画中，这些字符实体可以被动态改变，创造出动态效果，如旋转的百分比符号或滚动的条形。 接下来，CSS动画`animation...
在JNI中，`JNI_OnLoad`是一个特殊的方法，当本地库（native library）被Java虚拟机（JVM）加载时，会自动调用这个方法。这个函数为开发者提供了在库加载时执行初始化代码的机会，例如注册本地方法或设置全局变量。 ...
4. **性能监控与调优**：文档可能包含如何监控Onload的性能，如网络带宽利用率、TCP连接数等，以及根据实际情况进行性能调优的方法。 5. **故障排查与支持**：用户可能遇到的问题和解决策略也会被详细列出，帮助...
在网页开发过程中，`window.onload` 和 `insertAfter()` 方法是两个非常实用且重要的技术点。它们可以帮助开发者更好地控制页面加载流程以及动态地操作DOM（文档对象模型）。本文将深入探讨这两个方法的基本原理、...
本文实例讲述了IE8中动态创建script标签onload无效的解决方法。分享给大家供大家参考。具体分析如下： 今天做项目，发现一个奇怪的问题，动态创建的script标签在IE8下无法触发onload事件。 代码如下： 代码如下:var...
在前几个项目的开发中 遇到onload使用的几种情形1. 可以在Body 里面执行 <body onload=”alert(... 不要在test后面加() 因为这是在给事件关联触发的方法 如果加() 会立刻引发这个方法的执行(这可能不是我
本来按照事件顺序，小程序初始化时触发App里的onLaunch，后面再执行页面Page里的onLoad，但是在onLaunch里请求获取是否有权限，等待返回值的时候Page里的onLoad事件就已经执行了。 //app.js App({ onLaunch: ...
在这个过程中，浏览器会触发多个事件，包括onload、onbeforeunload和onunload事件。onload事件是在页面加载完成后触发的，onbeforeunload事件是在页面关闭前触发的，onunload事件是在页面关闭后触发的。 知识点3: ...