比较不同类型的本机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中文网其他相关文章！