整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
段JavaScript脚本程序, 负责关闭窗口, 如果网页不是通过脚本程序打开的(window.open()), 调用window.close()脚本关闭窗口前, 必须先将window.opener对象置为null,
否则浏览器(IE7、IE8)会弹出一个确定关闭的对话框。
解决方案有以下几种方法：
1.指向自己关闭法
＜script language="javaScript"＞
function closeWindow()
{
window.opener = null;
window.open(' ', '_self', ' ');
window.close();
}
＜/script＞
＜input type='button' value='关闭窗口' onClick="closeWindow()"＞2.框架top关闭法
＜script language="javaScript"＞
function closeWindow()
{
window.opener = null;
window.open('', '_top', '');
window.parent.close();
}
＜/script＞
＜input type='button' value='关闭窗口' onClick="closeWindow()"＞3.另外还有一种网上常用的方法, 不过似乎对IE8不起作用但在IE6上是中简单的直接关闭的方法
avaScript 代码添加了一个 beforeunload 事件监听器，提示用户在关闭标签页或浏览器窗口时确认离开，尝试关闭这个标签或浏览器窗口，你会看到提示消息。
写在前面，谷歌浏览器下可能会浏览器安全策略当做恶意弹窗拒绝执行，可以留意下浏览器动态。另外自定义的文案可能不能展示，浏览器会使用默认的弹窗文案。
代码示例如下：很简单的demo，请拿走吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Before Unload Example</title>
<script>
window.addEventListener('beforeunload', function (e) {
var confirmationMessage = '你确定要离开这个页面吗？';
// 标准的处理方式
e.preventDefault();
// 设置兼容旧版本的浏览器
e.returnValue = confirmationMessage;
return confirmationMessage;
});
</script>
</head>
<body>
<h1>Before Unload Example</h1>
<p>尝试关闭这个标签或浏览器窗口，你会看到提示消息。</p>
</body>
</html>关键代码示意：
这段代码做了一些兼容，适配多数浏览器，可以确保大多数情况下都能正确提示用户。
调试效果：
谷歌浏览器-挽留弹窗
这两天碰到一个需求：在用户刷新页面或者关闭页面的时候，前端要给后台发一条请求，释放该页面的授权占用。
分析了一下，这不就是在页面卸载时发请求嘛，三下五除二就实现一版：
window.addEventListener("beforeunload", () => {
let oReq = new XMLHttpRequest();
oReq.open("POST", "http://127.0.0.1:1991/loginout");
oReq.send(JSON.stringify({name: "编程三昧"}));
测试发现：
既然异步 Ajax 不行，那就试试同步的吧，结果直接报错了：
搜了一下，解释如下：
Chrome now disallows synchronous XHR during page dismissal when the page is being navigated away from or closed by the user. This involves the following events (when fired on the path of page dismissal): beforeunload, unload, pagehide, and visibilitychange.
概括起来就是：对现在的 Chrome 来说，在页面导航离开或者被用户关闭时，不允许发送同步 XHR 请求，涉及到的事件有：beforeunload、unload、pagehide 和 visibilitychange。
虽然问题没解决，但是却长知识了，这波不太亏！
后来通过搜索，看到有一个接口是专门来干这事的，那就是 navigator.sendBeacon() 。
这个方法主要用于满足统计和诊断代码的需要，这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据。
navigator.sendBeacon(url, data);
当用户代理成功把数据加入传输队列时，sendBeacon() 方法将会返回 true，否则返回 false。
既然有了接口，那实现起来就简单了。
window.addEventListener("beforeunload", (e) => {
const data = {name: "编程三昧"};
window.navigator.sendBeacon("http://127.0.0.1:1991/loginout", JSON.stringify(data));
});
不管是刷新页面还是关闭页面，后台都能接收到前端发送过来的请求，完美实现需求。
浏览器现在功能越来越强大，支持的 API 也越来越丰富，放在之前很难实现的功能，现在可能就是轻而易举的事，还是要多关注技术动态。
~
~本文完，感谢阅读！
~
学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！
你来，怀揣期望，我有墨香相迎！ 你归，无论得失，唯以余韵相赠！
知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！
*请认真填写需求信息，我们会在24小时内与您取得联系。
