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

alert("Hello, World!");

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

原生JavaScript彈出窗口的重大問(wèn)題

JavaScript彈出窗口是阻塞式的。

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

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

言歸正傳，讓我們來(lái)看看每個(gè)原生彈出窗口。

window.alert()

window.alert("Hello World");

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

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

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

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

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

window.confirm()

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

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

用途：用于“你確定嗎？”類(lèi)型的消息，以查看用戶(hù)是否真的想要完成他們已啟動(dòng)的操作。

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

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

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

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

window.prompt()

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

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

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

工作原理：如果用戶(hù)點(diǎn)擊“確定”，你將獲得他們?cè)谳斎肟蛑休斎氲膬?nèi)容。如果他們沒(méi)有輸入任何內(nèi)容并點(diǎn)擊“確定”，你將得到一個(gè)空字符串。如果他們選擇“取消”，返回值將為null。

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

window.onbeforeunload()

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

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

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

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

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

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

可訪問(wèn)性

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

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

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

常用替代方案

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

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

總結(jié)

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

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