整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
段JavaScript腳本程序, 負(fù)責(zé)關(guān)閉窗口, 如果網(wǎng)頁不是通過腳本程序打開的(window.open()), 調(diào)用window.close()腳本關(guān)閉窗口前, 必須先將window.opener對象置為null,
否則瀏覽器(IE7、IE8)會彈出一個(gè)確定關(guān)閉的對話框。
解決方案有以下幾種方法：
1.指向自己關(guān)閉法
＜script language="javaScript"＞
function closeWindow()
{
window.opener = null;
window.open(' ', '_self', ' ');
window.close();
}
＜/script＞
＜input type='button' value='關(guān)閉窗口' onClick="closeWindow()"＞2.框架top關(guān)閉法
＜script language="javaScript"＞
function closeWindow()
{
window.opener = null;
window.open('', '_top', '');
window.parent.close();
}
＜/script＞
＜input type='button' value='關(guān)閉窗口' onClick="closeWindow()"＞3.另外還有一種網(wǎng)上常用的方法, 不過似乎對IE8不起作用但在IE6上是中簡單的直接關(guān)閉的方法
avaScript 代碼添加了一個(gè) beforeunload 事件監(jiān)聽器，提示用戶在關(guān)閉標(biāo)簽頁或?yàn)g覽器窗口時(shí)確認(rèn)離開，嘗試關(guān)閉這個(gè)標(biāo)簽或?yàn)g覽器窗口，你會看到提示消息。
寫在前面，谷歌瀏覽器下可能會瀏覽器安全策略當(dāng)做惡意彈窗拒絕執(zhí)行，可以留意下瀏覽器動態(tài)。另外自定義的文案可能不能展示，瀏覽器會使用默認(rèn)的彈窗文案。
代碼示例如下：很簡單的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 = '你確定要離開這個(gè)頁面嗎？';
// 標(biāo)準(zhǔn)的處理方式
e.preventDefault();
// 設(shè)置兼容舊版本的瀏覽器
e.returnValue = confirmationMessage;
return confirmationMessage;
});
</script>
</head>
<body>
<h1>Before Unload Example</h1>
<p>嘗試關(guān)閉這個(gè)標(biāo)簽或?yàn)g覽器窗口，你會看到提示消息。</p>
</body>
</html>關(guān)鍵代碼示意：
這段代碼做了一些兼容，適配多數(shù)瀏覽器，可以確保大多數(shù)情況下都能正確提示用戶。
調(diào)試效果：
谷歌瀏覽器-挽留彈窗
這兩天碰到一個(gè)需求：在用戶刷新頁面或者關(guān)閉頁面的時(shí)候，前端要給后臺發(fā)一條請求，釋放該頁面的授權(quán)占用。
分析了一下，這不就是在頁面卸載時(shí)發(fā)請求嘛，三下五除二就實(shí)現(xiàn)一版：
window.addEventListener("beforeunload", () => {
let oReq = new XMLHttpRequest();
oReq.open("POST", "http://127.0.0.1:1991/loginout");
oReq.send(JSON.stringify({name: "編程三昧"}));
測試發(fā)現(xiàn)：
既然異步 Ajax 不行，那就試試同步的吧，結(jié)果直接報(bào)錯(cuò)了：
搜了一下，解釋如下：
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.
概括起來就是：對現(xiàn)在的 Chrome 來說，在頁面導(dǎo)航離開或者被用戶關(guān)閉時(shí)，不允許發(fā)送同步 XHR 請求，涉及到的事件有：beforeunload、unload、pagehide 和 visibilitychange。
雖然問題沒解決，但是卻長知識了，這波不太虧！
后來通過搜索，看到有一個(gè)接口是專門來干這事的，那就是 navigator.sendBeacon() 。
這個(gè)方法主要用于滿足統(tǒng)計(jì)和診斷代碼的需要，這些代碼通常嘗試在卸載（unload）文檔之前向web服務(wù)器發(fā)送數(shù)據(jù)。
navigator.sendBeacon(url, data);
當(dāng)用戶代理成功把數(shù)據(jù)加入傳輸隊(duì)列時(shí)，sendBeacon() 方法將會返回 true，否則返回 false。
既然有了接口，那實(shí)現(xiàn)起來就簡單了。
window.addEventListener("beforeunload", (e) => {
const data = {name: "編程三昧"};
window.navigator.sendBeacon("http://127.0.0.1:1991/loginout", JSON.stringify(data));
});
不管是刷新頁面還是關(guān)閉頁面，后臺都能接收到前端發(fā)送過來的請求，完美實(shí)現(xiàn)需求。
瀏覽器現(xiàn)在功能越來越強(qiáng)大，支持的 API 也越來越豐富，放在之前很難實(shí)現(xiàn)的功能，現(xiàn)在可能就是輕而易舉的事，還是要多關(guān)注技術(shù)動態(tài)。
~
~本文完，感謝閱讀！
~
學(xué)習(xí)有趣的知識，結(jié)識有趣的朋友，塑造有趣的靈魂！
大家好，我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關(guān)注，希望大家多多指教！
你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以余韻相贈！
知識與技能并重，內(nèi)力和外功兼修，理論和實(shí)踐兩手都要抓、兩手都要硬！
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
