整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript 關閉瀏覽器 (不彈出提示框)

          段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>

          關鍵代碼示意:

          1. window.addEventListener('beforeunload', function (e) { ... });:為 beforeunload 事件添加一個監聽器,觸發時會執行其中的函數。
          2. e.preventDefault();:調用 preventDefault 方法,這是現代瀏覽器處理 beforeunload 事件的標準方法。
          3. e.returnValue = confirmationMessage;:設置 returnValue 屬性,這在某些瀏覽器中是必須的。
          4. return confirmationMessage;:返回消息,這對于一些瀏覽器也是必需的,以確保提示消息能夠顯示。

          這段代碼做了一些兼容,適配多數瀏覽器,可以確保大多數情況下都能正確提示用戶。

          調試效果:

          • 谷歌瀏覽器-挽留彈窗

          谷歌瀏覽器-挽留彈窗

          • 火狐瀏覽器-挽留彈窗

          這兩天碰到一個需求:在用戶刷新頁面或者關閉頁面的時候,前端要給后臺發一條請求,釋放該頁面的授權占用。

          分析了一下,這不就是在頁面卸載時發請求嘛,三下五除二就實現一版:

          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()

          后來通過搜索,看到有一個接口是專門來干這事的,那就是 navigator.sendBeacon()

          描述

          這個方法主要用于滿足統計和診斷代碼的需要,這些代碼通常嘗試在卸載(unload)文檔之前向web服務器發送數據。

          語法

          navigator.sendBeacon(url, data);
          

          參數

          • url 表明 data 將要被發送到的網絡地址。
          • data 參數是將要發送的 ArrayBufferViewBlobDOMString 或者 FormData 類型的數據。

          返回值

          當用戶代理成功把數據加入傳輸隊列時,sendBeacon() 方法將會返回 true,否則返回 false

          實現

          既然有了接口,那實現起來就簡單了。

          代碼

           window.addEventListener("beforeunload", (e) => {
              const data = {name: "編程三昧"};
              window.navigator.sendBeacon("http://127.0.0.1:1991/loginout", JSON.stringify(data));
          });
          

          效果

          不管是刷新頁面還是關閉頁面,后臺都能接收到前端發送過來的請求,完美實現需求。

          總結

          瀏覽器現在功能越來越強大,支持的 API 也越來越豐富,放在之前很難實現的功能,現在可能就是輕而易舉的事,還是要多關注技術動態。

          ~

          ~本文完,感謝閱讀!

          ~

          學習有趣的知識,結識有趣的朋友,塑造有趣的靈魂!

          大家好,我是〖編程三昧〗的作者 隱逸王,我的公眾號是『編程三昧』,歡迎關注,希望大家多多指教!

          你來,懷揣期望,我有墨香相迎! 你歸,無論得失,唯以余韻相贈!

          知識與技能并重,內力和外功兼修,理論和實踐兩手都要抓、兩手都要硬!


          主站蜘蛛池模板: 亚洲一区二区三区乱码A| 国产成人一区二区三中文| 日韩中文字幕精品免费一区| 欧洲精品码一区二区三区免费看 | 无码精品人妻一区二区三区漫画 | 亚洲AV无码一区二区三区性色 | 久久精品无码一区二区无码| 国产无码一区二区在线| 国偷自产Av一区二区三区吞精 | 国模无码视频一区二区三区| 秋霞日韩一区二区三区在线观看| 精品视频午夜一区二区| 亚洲日韩精品一区二区三区无码 | 白丝爆浆18禁一区二区三区| 久久成人国产精品一区二区| 久久精品亚洲一区二区三区浴池| 无码人妻aⅴ一区二区三区| 国产精品男男视频一区二区三区 | 精品国产毛片一区二区无码| 久久久国产精品亚洲一区| 国产一区二区三区在线电影| 性无码一区二区三区在线观看| 亚洲欧美国产国产综合一区| 中文字幕一区二区免费| 一区二区三区无码被窝影院| 一区二区三区免费视频播放器| 国产精品毛片一区二区三区| 伦精品一区二区三区视频| 亚洲第一区精品观看| 麻豆国产一区二区在线观看| 亚洲国产精品一区二区三区久久| 无码人妻少妇色欲AV一区二区| 国产91精品一区| 亚洲国产高清在线精品一区| 国产成人久久精品麻豆一区| 人妻少妇精品视频三区二区一区 | 久久婷婷色一区二区三区| 午夜精品一区二区三区在线视| 日韩中文字幕一区| 国产一区二区福利| 国产免费伦精品一区二区三区|