onbeforeunload，onbeforeload事件的用法
大家好，今天我将向大家分享有关onbeforeunload和onbeforeload事件的用法的一些独特见解，希望能够为你们带来新的思考和启示。
Onload,Onunload和onbeforeunload方法的异同
声明:网上收集
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
}
onbeforeload事件的用法
onbeforeunload事件在即将离开当前页面（刷新或关闭）时触发。
该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似"确定要离开此页吗？"。该信息不能删除。但开发者可以自定义一些消息提示与标准信息一起显示在对话框。
注意：
1、如果没有在<body>元素上指定 onbeforeunload事件，则需要在 window对象上添加事件，并使用 returnValue属性创建自定义信息。
2、在 Firefox浏览器中，只显示默认提醒信息（不显示自定义信息）。
...浏览器事件之chrome浏览器真支持onbeforeunload事件吗
背景：做Flash关闭时做下统计视频的浏览数，想发个请求给服务器+1，Firefox，IE9，（IE8不行）都行，再就是Chrome不行，如下备案。
常常的网上结论是这样的：
1、window.onbeforeunload()函数主要是用于捕获关闭浏览器事件（包括刷新）；
2、window.onunload()函数主要是执行关闭游览器后的动作；
实践中听说firefox有些问题：
view plainprint?
function wisTracker(){
this.bindClick= function(){
if(document.attachEvent){
window.attachEvent("onbeforeunload",this.tracePlay);
} else{
window.addEventListener("beforeunload",this.tracePlay,false);
}
};
this.tracePlay= function(){
if($('#__XYFlashPlayer__')!= null){
var playTraceerImg= document.getElementById("playTraceerImg");
playTraceerImg.src=$('#__XYFlashPlayer__').get(0).getStaticData()+"&rand="+Math.random();
}
};
}
在footer.html里调用：
view plainprint?
wisTracker= new wisTracker();
wisTracker.bindClick();
在每个访问的页面里包含：
view plainprint?
<{include file="admin/footer.html"}>
在这个footer.html里包含的是另一个js的域名：（较大网站都这么干，程序和css，js分开以分摊服务器的压力）
在footer.html这个模板里有如下js，分析这个staticURL：
<script src="<{$staticURL}>js/justwinit.common.js?ver=<{$version}>" type="text/javascript"></script>
preview.php把这个配置给render到smarty模板里：
$this->view->staticURL= KO::config('url.static_url');
url.php里配置该静态文件的域名，这个在apache里配置好,下面会有示例：
'static_url'=>'http://s.justwinit.cn/',
Apache配置域名：
view plainprint?
<VirtualHost*:80>
# ServerAdmin webmaster@dummy-host2.example.com
DocumentRoot"D:\www\justwinit\trunk\assets\static"
ServerName s.justwinit.cn
ErrorLog"logs/w.justwinit.cn-error.log"
CustomLog"logs/w.justwinit.cn-access.log" common
<Directory"D:/www/justwinit/trunk/assets/static/">
Options Indexes FollowSymLinks MultiViews
AllowOverride all
Order Deny,Allow
Deny from all
Allow from all
</Directory>
</VirtualHost>
用普通的js无法实现在兼容监听IE,FF,Google等浏览器的关闭事件。经过测试，用jq是可以实现兼容的，不过并不保证完全兼容，还需要你自己测试一下，只需一句简短的语句就可以至少兼容三大浏览器了：
view plainprint?
<script type="text/javascript">
window.onbeforeunload= function(){return'Sure to leave?';};
</script>
但：
chrome浏览器支持onbeforeunload事件吗？
Chrome Safari在调用 document.write、document.open、document.close方法以及"javascipt:"伪协议时，不会触发 onbeforeunload事件。
http://w3help.org/zh-cn/causes/BX2047
是bug，见http://code.google.com/p/chromium/issues/detail?id=4422
用的时候chrome并不支持onbeforeunload。
window.onbeforeunload=function(){...}不执行其中的代码
$(window).bind('beforeunload', function(){
alert("Good Bye")
});
Works great with Firefox, IE8 but not in Chrome. Is it a known problem or is there any alternative for that?
Actually what I am trying to do is to log details whenever user tries to close the browser.
function LogTime()
{
jQuery.ajax({
type:"POST",
url:"log.php",
data:"",
cache: false,
success: function(response)
{
}
}
);
}
$(window).bind('beforeunload', function(){
LogTime();
});
This works well in Firefox, but not in Chrome
From:http://stackoverflow.com/questions/10680544/beforeunload-chrome-issue
老外说的Ajax，我也试了，也确实不行的，测试下其他的方法，当写成这样：
window.onbeforeunload= function(){
console.log("Helo test chrome beforeunload");
callExternal();
};
或：
<body onunload="alert('Helo test chrome unload')">
里面有Alert这些输出时，会有如下提示：
Blocked alert('Helo test chrome beforeunload')。
Blocked alert('Helo test chrome unload') during unload。
最后使用Iframe调用的方法：
加入：
<iframe id="iframedemo" name="iframedemo" src="inner.html" width="10%" frameborder="1"></iframe>
inner.html:
<script language="javascript">
function demofunction(){
console.log("1222");
alert("demofunction");
}
</script>
问题依旧提示有问题，嗨，怎么办呢？
在IFrame用Ajax也不行：
view plainprint?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery&& document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')
</script>
<script language="javascript">
function demofunction(){
jQuery.ajax({
type:"POST",
url:"log.php",
data:"",
cache: false,
success: function(response)
{
}
}
);
}
</script>
Onunload与Onbeforeunload
Onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。
Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload可以做到。
http://blog.csdn.net/victor16345/article/details/7670464
window关闭时onunload,onbeforeunload处理
要想在页面跳转时询问用户，需要在onbeforeunload事件中返回询问字符:
window.onbeforeunload= function(e){
return‘Are You Sure To Leave This Page?’;
};
如果在关闭页面时需要做些请求动作，在onunload事件中处理较好:
window.onunload= function(){
//close function
};
注意事项：
1:不要试图用addEventListener或attachEvent绑定这两个事件，浏览器不兼容。
2:应该在onbeforeunload中询问，而将退出动作放在onunload中，这样逻辑好清晰。
3:如果是ajax请求放在onunload事件中，需要同步执行ajax,否则是不能保证这个ajax请求会成功的。
关于onbeforeunload，onbeforeload事件的用法的介绍到此结束，希望对大家有所帮助。