离开页面前 onbeforeunload 事件使用和兼容

发布于 2018-07-11 20:02:39 字数 1245 浏览 1594 评论 0

在我们编写文章或者是写日志的时候,可能会不小心点击到其它链接,跳转到其它页面,导致我们写的东西没有保存,这是一个很大的损失,其实可以使用 onbeforeunload 事件来避免这样的事情发生,这也是提高用户体验的一个方法。

调用方法

onbeforeunload 事件可以直接写在 body 的标签里面,像这样:

<body onbeforeunload="return '温馨提醒:\n这些对您来说【非常重要】,建议点击【留在此页】';">

也可以自定义函数调用方法,这种方法更方便编写代码,所以也推荐大家使用这个方法:

window.onbeforeunload = function (e) {
  e = e || window.event;
  // For IE and Firefox prior to version 4
  if (e) {
    e.returnValue = '确定退出吗?ss';
  }

  // For Safari
  return '确定退出吗?ss';
};

使用举例

例如我们要在一个表单提交以前,防止用户因为误操作而跳转页面导致编写的内容丢失,我们可以这样编写代码:

表单 HTML 代码

<form id='YourFormId' action=''>
   <input type="button" name="button" id="button" value="提交" onclick="sumbit();"/>
</form>

JavaScript 代码

var is_submit = false;
window.onbeforeunload=function checkLeave(e){
    e = e || window.event;  //此方法为了在firefox中的兼容
    if(!is_submit){
        e.returnValue='离开会使编写的内容丢失。';
    }
}

//提交表单
function sumbit(){
    is_submit = true;
    document.getElementById('YourFormId').submit();
}

代码说明:

  • 在点击提交按钮的时候,会触发 submit() 方法,设置 is_submit 为true,然后在提交表单。
  • 在页面被关闭、跳转、刷新的时候先检测 is_submit 是否为真,即是否提交了表单,如果没有提交表单则弹出确认窗口。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。