离开页面或关闭浏览器时,这两个方法可以被执行。
1、onunload事件:
当用户关闭一个页面时触发 onunload 事件。
1.关闭浏览器窗口
2.通过地址栏或收藏夹前往其他页面的时候
3.点击返回,前进,刷新,主页其中一个的时候
4.点击一个前往其他页面的url连接的时候
2、onbeforeunload事件:
事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。
1.关闭浏览器窗口
2.通过地址栏或收藏夹前往其他页面的时候
3.点击返回,前进,刷新,主页其中一个的时候
4.点击一个前往其他页面的url连接的时候
2、两者区别:
onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。onbeforeunload也是在页面刷新或关闭时调用,onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取;而onunload则已经从服务器上读到了需要加载的新的页面,在即将替换掉当前页面时调用。onunload是无法阻止页面的更新和关闭的,而 onbeforeunload 可以做到。
4.兼容性测试:
1.onunload事件
关闭页面 | 跳转页面 | 关闭浏览器 | 刷新页面 | |
谷歌 | 支持 | 支持 | 支持 | 支持 |
火狐 | 不支持 | 不支持 | 不支持 | 不支持 |
safari | 不支持 | 支持 | 不支持 | 支持 |
opera | 支持 | 支持 | 支持 | 支持 |
2.onbeforeunload事件
关闭页面 | 跳转页面 | 关闭浏览器 | 刷新页面 | |
谷歌 | 支持 | 支持 | 支持 | 支持 |
火狐 | 不支持 | 不支持 | 不支持 | 不支持 |
safari | 支持 | 支持 | 支持 | 支持 |
opera | 支持 | 支持 | 支持 | 支持 |
IE浏览器不支持onbeforeunload事件,会继续查找兼容方法
3.用法:
放在<script>脚本里面:
window.onbeforeunload = unbeforeloadPage; function unbeforeloadPage() { localStorage.input = document.getElementById('input').value; alert("unbeforeload event detected!"); $.ajax({ url: '/test', type: 'POST', data:{value: document.getElementById('input').value}, async : false, success:function(){}, error:function(){} }) return 'content is not save'; }
async : false 要加上,否则ajax不执行。
2.
$(window).bind('beforeunload', function(){ .... return '提示框上的文本' }