onbeforeunload事件的使用
2019-02-15 本文已影响2人
小遁哥
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
window.onbeforeunload = function() {
return '你确定要离开吗？';
};
</script>
</head>
<a href="www.baidu.com">百度</a>
</html>
onbeforeunload用于页面在刷新、关闭、跳转时提醒用户。
只要return返回不是null、undefined，就会触发默认行为，因此，可以在这里加入条件判断，优化用户体验。
alert、confirm这些在这里没用。
上述代码时触发beforeunload的基本例子，不过在不同的浏览器中触发方式不一样。
Chrome71 中，需要至少点击一下视口刷新时才可触发
image.png
而且不会在乎你返回的内容，是浏览器自定义的。
IE11中会显示return 返回的内容，不必点击视口即可在刷新时触发。
补充
window.addEventListener("beforeunload", this.onLevaeConfirm);
以上方式无效，Chrome71和Edge17中测试过
