JavaScript >> Javascript 文檔 >  >> JavaScript

如何在 JavaScript 中檢測瀏覽器或標籤頁關閉

在 JavaScript 中,您可以使用 beforeunload 事件來檢測瀏覽器中關閉的選項卡或窗口。用於提醒用戶網頁上未保存的更改或防止用戶錯誤地關閉窗口或瀏覽器。

下面是一個示例,您可以使用它在用戶嘗試關閉選項卡或窗口時顯示警告消息:

window.addEventListener('beforeunload', (e) => {
  e.preventDefault()
  return (e.returnValue = 'Are you sure you want to close?')
})

我們使用 addEventListener() 將事件處理程序附加到任何 DOM 對象的方法,包括 HTML 元素,document 對象和 window 對象。

beforeunload 在窗口、文檔及其資源即將被卸載之前觸發。此時文檔依然可見,事件依然可以取消。

根據規範,你必須調用 preventDefault() 在事件上顯示確認對話框。 preventDefault() 方法用於防止事件的默認操作。在這種情況下,資源、窗口和文檔的卸載。

請注意,某些瀏覽器可能不會顯示在 beforeunload 中創建的提示 除非用戶與頁面交互,否則事件處理程序。這用於對抗惡意網站創建的不需要的彈出窗口。


Tutorial JavaScript 教程
  1. 你應該看看被低估的網絡開發 YouTube 用戶

  2. JavaScript 中的閉包和詞法作用域

  3. 深入了解 Drupal 8 + Gatsby.JS(第 2 部分)

  4. 在 JavaScript 中將對像數組轉換為 CSV 字符串

  5. 讓我們獲取 Material,Material-UI

  6. 修復累積佈局偏移

  7. 我無法從 Filezilla 在 Windows 中打開 JS 文件

  1. 發布你的第一個 Browserify/Node 模塊

  2. 跨瀏覽器書籤/添加到收藏夾 JavaScript

  3. 比較代碼:Ruby、JavaScript 和 Java 走進酒吧...

  4. 我的雞蛋引用天氣應用程序

  5. React 組件是如何工作的?

  6. #CodePenChallenge 形狀爆炸按鈕微交互

  7. Redux 表單“onSubmitSuccess”單元測試

  1. JavaScript 排序比較函數 |示例代碼

  2. Particles.vue3 發布! Vue.js 3.x 的粒子動畫

  3. 為什麼應用程序在調試模式下變慢,React Native

  4. 蓋茨比,如何更改網站圖標