监听浏览器关闭按钮点击事件 -- 使用JS

Onunload与Onbeforeunload
Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行 (测试了下,发现onbeforeunload由于会阻止onunload的执行,则也会window.close()的执行,也说明了window.close()是在onunload之后执行的)

<wbr><wbr><wbr> Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。Onunload是无法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。曾经做一个考试系统,涉及到防止用户半途退出考试(有意或者无意),代码如下:</wbr></wbr></wbr>
Java代码 <wbr></wbr>
  1. <script<wbr>type=</wbr>"text/javascript"> <wbr><wbr></wbr></wbr>
  2. <!--<wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr>
  3. <wbr><wbr><wbr><wbr>window.onbeforeunload<wbr>=<wbr>onbeforeunload_handler; <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  4. <wbr><wbr><wbr><wbr>window.onunload<wbr>=<wbr>onunload_handler; <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  5. <wbr><wbr><wbr><wbr>function<wbr>onbeforeunload_handler(){ <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  6. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>var<wbr>warning=</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>"确认退出?";<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  7. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>return<wbr>warning; <wbr><wbr></wbr></wbr></wbr>
  8. <wbr><wbr><wbr><wbr>} <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  9. <wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  10. <wbr><wbr><wbr><wbr>function<wbr>onunload_handler(){ <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  11. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>var<wbr>warning=</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>"谢谢光临"; <wbr><wbr></wbr></wbr>
  12. <wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>alert(warning); <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  13. <wbr><wbr><wbr><wbr>} <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr>
  14. //<wbr>--&gt;</wbr> <wbr><wbr></wbr></wbr>
  15. </script> <wbr><wbr></wbr></wbr>
  16. <wbr><wbr><wbr></wbr></wbr></wbr>
<wbr></wbr>
这段代码在FF和IE上都能正确执行.再点击关闭按钮时首先触发obbeforeunload事件,点击否定时不执行onload事件.
通常应用在 注销session等等登陆信息 等方面....
<wbr></wbr>这里一并推荐一个教程 ActionScript3 里面写道:
运用onunload事件判断浏览器是刷新还是关闭窗口
function CloseOpen(event) {
if(event.clientX<=0 && event.clientY<0) {
alert("关闭");
}
else
{
alert("刷新或离开");
}
}
<wbr><div> <div>Java代码 <wbr></wbr> </div> </div> <div> <ol> <li> <span><span>window.onbeforeunload<wbr>=<wbr>function()<wbr></wbr></wbr></wbr></span><span><span style="color:#008200">//author:<wbr>meizz<wbr></wbr></wbr></span></span> <span><wbr><wbr></wbr></wbr></span></span> </li> <li> <span><wbr><wbr><wbr><wbr><wbr><wbr><wbr>{<wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></span> </li> <li> <span><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>var<wbr>n<wbr>=<wbr>window.event.screenX<wbr>-<wbr>window.screenLeft;<wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></span> </li> <li> <span><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>var<wbr>b<wbr>=<wbr>n<wbr>&gt;<wbr>document.documentElement.scrollWidth-</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></span><span><span style="color:#c00000">20</span></span><span>;<wbr><wbr><wbr></wbr></wbr></wbr></span> </li> <li> <span><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></span><span><strong><span style="color:#7f0055">if</span></strong></span><span>(b<wbr>&amp;&amp;<wbr>window.event.clientY<wbr>&lt;<wbr></wbr></wbr></wbr></wbr></span><span><span style="color:#c00000">0</span></span><span><wbr>||<wbr>window.event.altKey)<wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></span> </li> <li> <span><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>{<wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></span> </li> <li> <span><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>alert(</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></span><span><span style="color:#0000ff">"是关闭而非刷新"</span></span><span>);<wbr><wbr><wbr></wbr></wbr></wbr></span> </li> <li> <span><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>window.event.returnValue<wbr>=<wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></span><span><span style="color:#0000ff">""</span></span><span>;<wbr></wbr></span><span><span style="color:#008200">//这里可以放置你想做的操作代码<wbr></wbr></span></span> <span><wbr><wbr></wbr></wbr></span> </li> <li> <span><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>}<wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></span> </li> <li> <span><wbr><wbr><wbr><wbr><wbr><wbr><wbr>}<wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></span> </li> </ol> </div> <p><span>------------------------------------------------------------------------------------------</span></p> <p><span>另一篇的转载:</span></p> <div> <p style="text-align:center"><span>最近写东西的时候发现需要对浏览器的关闭进行监听,当用户关闭的时候需要调用session.invalid();清空session信息,但是仔细一查手册发现无论是body还是window都没有onclose事件,之后<span style="color:#ff0000">onload,onunload,beforeunload</span>三个事件</span></p> <p style="text-align:center">然而三个时间无论是哪个都无法单独解决单独监听浏览器关闭的事件,因为在浏览器正常运行时先加载的是beforeunload-&gt;onunload-&gt;onload 但是麻烦的是如果刷新页面时是执行beforeunload-&gt;onunload,如果关闭浏览器的话是执行onunload<span style="color:#ed1c24">(实际上关闭浏览器beforeunload也执行的)</span>.如果单单监听onunload的话是无法区别用户是刷新还是关闭窗口的.所以就要用beforeunload来监测了</p> <p style="text-align:left"><span style="color:#ff0000">window.οnbefοreunlοad=onclose;</span></p> <p style="text-align:left"><span style="color:#ff0000">function onclose()<br> {<br><wbr><wbr><wbr> if(event.clientX&gt;document.body.clientWidth&amp;&amp;event.clientY&lt;0||event.altKey)<br><wbr><wbr><wbr> {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> removeSession();//这里添加具体的处理方案<br><wbr><wbr><wbr> }<br> }</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></span></p> <p style="text-align:left"><span style="color:#000000">经过测试,IE7浏览器可以监测监听到 alt+f4 或者单击右上角小叉子退出,但是对于多选项卡浏览的用户貌似无法监听到这点比较可惜~</span> </p> <p style="text-align:left"></p> <div> <p style="text-align:left"></p> </div> <p></p> <p style="text-align:left"><wbr></wbr></p> </div> </wbr>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值