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

 alert("Hello, World!");

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

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

JavaScript彈出窗口是阻塞式的。

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

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

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

window.alert()

 window.alert("Hello World");

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

用途：顯示簡單的消息或調(diào)試變量的值。

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

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

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

window.confirm()

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

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

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

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

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

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

有很多方法可以要求用戶確認(rèn)某些內(nèi)容?？赡苁且粋€帶有確認(rèn)按鈕的清晰UI，連接到你需要它執(zhí)行的操作。

window.prompt()

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

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

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

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

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

window.onbeforeunload()

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

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

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

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

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

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

可訪問性

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

警報(bào)框的使用曾經(jīng)不被鼓勵，但它們在現(xiàn)代屏幕閱讀器中實(shí)際上是可訪問的。

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

常用替代方案

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

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

總結(jié)

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

以上是比較不同類型的本機(jī)JavaScript彈出窗口的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！