js 怎么监听到页面关闭或页面跳转事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 怎么监听到页面关闭或页面跳转事件相关的知识，希望对你有一定的参考价值。
js 怎么监听到页面关闭或页面跳转事件，以下介绍方法：
//在页面关闭或者跳转的时候调用
window.onbeforeunload = function (e)
return e.returnValue = '确认关闭？';
window.onunload = function ()
//这个执行完onbeforeunload 会调用该function，
//alert()是不会有弹出的。
调用上面的代码，用谷歌浏览器关闭浏览页面或者跳转页面都会弹出下面页面询问。
注意：刷新的时候也会弹出询问，这监控也把刷新当成重新打开页面相当跳转。
参考技术A Onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。 参考技术B body 的onunload 事件会在用户离开页面时被触发。<script>
function tips()
alert("你要离开当前页面吗")
</script>
<body onunload="tips()"> 参考技术C window.onbeforeunload = function ()
return confirm("You want to leave?");
;
layui实现关闭一个选项卡之后刷新另一个选项卡的数据
场景：某供应商模块，有新增、编辑操作，对数据进行更改后，关闭新增或编辑页面，原页面数据刷新
思路：1、如果能在供应商页面监听到新增或编辑页面的tab页关闭,那么在供应商页面通过事件监听后执行:window.location.reload()即可。
百度许久无果，故放弃。
2、在新增或编辑操作完成时，重新发送供货商的页面请求,起初总是用内置的refresh()、reload()、refreshTabs()等方法一通乱试，也想过用ajax重新请求后台供应商页面，但都无效或有差错，最后选择关闭tab页再重新打开就好,虽然很笨，但用户并不能感觉到，且能实现数据刷新，下面时主要代码。
form.on(‘submit(save)‘, function (data)
data.field.status = data.field.status ? 0 : 1;
$.ajax(
type: "POST",
url: siteurl + ‘/sys/supplier/save‘,
data: JSON.stringify(
‘supplierInfo‘: data.field,
),
async: false,
dataType: "json",
contentType: ‘application/json;charset=UTF-8‘,
success: function (r)
if (r.code === 0)
if (r.re !== 0)
pLayer.confirm(‘保存成功，是否返回？‘,
btn: [‘返回‘, ‘继续添加‘]
, function ()
//关闭弹出框（提示返回或继续添加）
pLayer.closeAll();
//先关闭供货商模块，然后再次打开，此时可以实现数据刷新
parent.app.closeTab(398);
parent.app.addTab(
url: siteurl + ‘/sys/supplier/searchlist‘,
icon: ‘‘,
title: ‘供货商‘,
id: ‘398‘//menuId
)
//此刻再关闭新增或编辑页面
parent.app.closeTab(75);//75为选项卡id，也对应了menuId，id可以通过F12，element中查看
);
else
pLayer.alert(‘添加失败！‘);
else
pLayer.alert(r.msg);
);
return false;
);
以上是关于js 怎么监听到页面关闭或页面跳转事件的主要内容，如果未能解决你的问题，请参考以下文章