比較不同類型的本機JavaScript彈出窗口

JavaScript提供多種內置彈出式API，用於顯示特殊的UI以進行用戶交互。最常見的是：

 alert("Hello, World!");

不同瀏覽器的UI有所不同，但通常你會看到一個小窗口以非常醒目的方式彈出到頁面中央，其中包含你傳遞的消息。以下是Firefox和Chrome的示例：

原生JavaScript彈出窗口的重大問題

JavaScript彈出窗口是阻塞式的。

彈出窗口打開時，整個頁面實際上會停止運行。彈出窗口打開期間，你無法與頁面上的任何內容進行交互——這正是“模態窗口”的意義所在，但它仍然是一個你應該密切注意的用戶體驗因素。至關重要的是，彈出窗口打開時，沒有其他主線程JavaScript代碼運行，這可能會（而且很可能）不必要地阻止你的網站執行其需要執行的操作。

在十次中有九次，最好重新設計你的架構，避免使用這種強制停止所有操作的行為。瀏覽器對原生JavaScript警報的實現方式也使得你無法控制其設計。你無法控制它們在頁面上的位置或到達那裡的外觀。除非你絕對需要它們的完全阻塞特性，否則幾乎總是最好使用自定義用戶界面，你可以設計它來為用戶定制體驗。

言歸正傳，讓我們來看看每個原生彈出窗口。

window.alert()

 window.alert("Hello World");

// 顯示消息示例const button = document.querySelectorAll("button");
button.addEventListener("click", () => {
  alert("按鈕文本：" button.innerText);
});

用途：顯示簡單的消息或調試變量的值。

工作原理：此函數接受一個字符串，並在帶有“確定”標籤的按鈕的彈出窗口中將其呈現給用戶。你只能更改消息，而不能更改其他任何方面，例如按鈕上的文字。

替代方案：與其他警報一樣，如果你必須向用戶顯示消息，最好以適合你嘗試執行的操作的方式來顯示它。

如果你試圖調試變量的值，請考慮使用console.log("变量的值：", variable);並在控制台中查看。

window.confirm()

 window.confirm("你確定嗎？");

// 提問示例let answer = window.confirm("你喜歡貓嗎？");
if (answer) {
  // 用戶點擊了“確定”
} else {
  // 用戶點擊了“取消”
}

用途：用於“你確定嗎？”類型的消息，以查看用戶是否真的想要完成他們已啟動的操作。

工作原理：你可以提供自定義消息，彈出窗口將提供“確定”或“取消”選項，然後你可以使用該值查看返回的內容。

替代方案：這是一種非常具有侵入性的提示用戶的方式。正如Aza Raskin所說：

……也許你根本不想使用警告。 ”

有很多方法可以要求用戶確認某些內容。可能是一個帶有確認按鈕的清晰UI，連接到你需要它執行的操作。

window.prompt()

 window.prompt("你的名字是什麼？");

let answer = window.prompt("你最喜歡的顏色是什麼？");
// answer是用戶輸入的內容（如果有的話）

用途：提示用戶輸入。你提供一個字符串（可能格式化為問題），用戶會看到一個包含該字符串、一個可以輸入的輸入框以及“確定”和“取消”按鈕的彈出窗口。

工作原理：如果用戶點擊“確定”，你將獲得他們在輸入框中輸入的內容。如果他們沒有輸入任何內容並點擊“確定”，你將得到一個空字符串。如果他們選擇“取消”，返回值將為null。

替代方案：與所有其他原生JavaScript警報一樣，這也不允許你設置警報框的樣式或位置。最好使用<input>元素來獲取用戶的信息。這樣，你可以提供更多上下文和有目的的設計。

window.onbeforeunload()

 window.addEventListener("beforeunload", () => {
  // 標準要求取消默認操作。
  event.preventDefault();
  // Chrome要求設置returnValue（通過MDN）
  event.returnValue = '';
});

用途：在用戶離開頁面之前發出警告。這聽起來可能非常煩人，但它並不經常被煩人地使用。它用於你可能正在進行工作並需要顯式保存它的網站。如果用戶尚未保存他們的工作並且即將離開，你可以使用此方法來警告他們。如果他們已經保存了他們的工作，你應該將其刪除。

工作原理：如果你已將beforeunload事件附加到窗口（並執行了上面代碼片段中顯示的其他操作），則當用戶嘗試離開頁面時，他們會看到一個彈出窗口詢問他們是否要“離開”或“取消”。離開網站可能是因為用戶點擊了一個鏈接，但也可能是點擊瀏覽器刷新或後退按鈕的結果。你無法自定義消息。

MDN警告說，某些瀏覽器要求與頁面進行交互才能使其正常工作：

為了對抗不需要的彈出窗口，某些瀏覽器不會顯示在beforeunload事件處理程序中創建的提示，除非頁面已與之交互。此外，有些瀏覽器根本不會顯示它們。

替代方案：沒有什麼能想到的。如果這是用戶丟失工作的問題，你必須使用它。如果他們選擇留下，你應該清楚地說明他們應該做什麼以確保離開是安全的。

可訪問性

原生JavaScript警報過去在可訪問性領域不受歡迎，但屏幕閱讀器似乎在處理它們的方式上變得更智能了。根據賓夕法尼亞州立大學的可訪問性指南：

警報框的使用曾經不被鼓勵，但它們在現代屏幕閱讀器中實際上是可訪問的。

在創建你自己的模態窗口時，務必考慮可訪問性，但有一些很棒的資源（例如Ire Aderinokun的這篇文章）可以為你指明方向。

常用替代方案

原生JavaScript彈出窗口有很多替代方案，例如編寫你自己的彈出窗口、使用模態窗口庫和使用警報庫。請記住，我們介紹的內容都不能完全阻止JavaScript執行和用戶交互，但有些可以通過使背景變灰並強制用戶在繼續之前與模態窗口交互來做到這一點。

你可能想看看HTML的原生<dialog></dialog>元素。 Chris最近對其進行了實踐研究。它很有吸引力，但顯然存在一些重大的可訪問性問題。我不確定構建你自己的彈出窗口是否會更好或更糟，因為處理模態窗口是一個非常重要的交互式元素。一些UI庫（如Bootstrap）提供模態窗口，但可訪問性很大程度上仍然掌握在你手中。你可能需要查看像a11y-dialog這樣的項目。

總結

使用Web平台的內置API似乎是正確的做法——你不是發送大量的JavaScript代碼來複製功能，而是使用我們已經內置的功能。但是，這裡存在嚴重的限制、用戶體驗問題和性能問題，這些問題都不利於使用原生JavaScript彈出窗口。了解它們是什麼以及如何使用它們很重要，但在生產Web網站中你可能不需要它們很多。

以上是比較不同類型的本機JavaScript彈出窗口的詳細內容。更多資訊請關注PHP中文網其他相關文章！