离开页面前 onbeforeunload 事件使用和兼容 - 文章教程

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

发布于 2018-07-11 字数 1612 浏览 1374 评论 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 是否为真,即是否提交了表单,如果没有提交表单则弹出确认窗口。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

佚名

文章 0 评论 0

文江

文章 0 评论 0

2012013325

文章 0 评论 0

女中豪杰

文章 2 评论 0