当离开页面时对未保存内容保存(window.onunload与window.onbeforeunload)

离开页面或关闭浏览器时,这两个方法可以被执行。

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.用法:

放在

你可能感兴趣的:(HTML5)