JS捕获关闭浏览器事件之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?



在这个footer.html里包含的是另一个js的域名：（较大网站都这么干，程序和css，js分开以分摊服务器的压力）
在footer.html这个模板里有如下js，分析这个staticURL：
js/justwinit.common.js?ver=" type="text/javascript">
preview.php 把这个配置给render到smarty模板里：
$this->view->staticURL = KO::config('url.static_url');
url.php里配置该静态文件的域名，这个在apache里配置好,下面会有示例：
'static_url' =>'http://s.justwinit.cn/',
Apache配置域名：

view plainprint?

# ServerAdmin webmaster@dummy-host2.example.com
DocumentRoot "D:\www\justwinitrunk\assets\static"
ServerName s.justwinit.cn
ErrorLog "logs/w.justwinit.cn-error.log"
CustomLog "logs/w.justwinit.cn-access.log" common

Options Indexes FollowSymLinks MultiViews
AllowOverride all
Order Deny,Allow
Deny from all
Allow from all




用普通的js无法实现在兼容监听IE,FF,Google等浏览器的关闭事件。 经过测试，用jq是可以实现兼容的，不过并不保证完全兼容，还需要你自己测试一下，只需一句简短的语句就可以至少兼容三大浏览器了：

view plainprint?

window.onbeforeunload = function() {return 'Sure to leave?';};



但：
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();
};
或：

里面有Alert这些输出时，会有如下提示：
Blocked alert('Helo test chrome beforeunload')。
Blocked alert('Helo test chrome unload') during unload。

最后使用Iframe调用的方法：
加入：

inner.html:

function demofunction() {
console.log("1222");
alert("demofunction");
}

问题依旧提示有问题，嗨，怎么办呢？
在IFrame用Ajax也不行：

view plainprint?

!window.jQuery && document.write('')



function demofunction() {

jQuery.ajax({
type: "POST",
url: "log.php",
data: "",
cache: false,
success: function(response)
{
}
}
);

}




Onunload与Onbeforeunload
Onunload，onbeforeunload都是在刷新或关闭时调用，可以在脚本中通过window.onunload来指定或者在里指定。区别在于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请求会成功的。

chrome浏览器真的支持onbeforeunload事件：
chrome浏览器版本52.0.2743；
测试代码如下：
onbeforeunload dfdfdf //alert(2);function close(){var div1 = document.getElementById('div1');div1.innerHTML = '11111111111111111111111111111111111111111111111111111111';}4.运行代码，按 F5 刷新网页的一瞬间可以看到里面的文字变成 1111... 了，证明浏览器已经调用了 onbeforeunload事件；

总结：虽然浏览器调用onbeforeunload事件，但是无法阻止浏览器关闭

　　JS捕获关闭浏览器事件之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\justwinitrunk\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请求会成功的。