JavaScript 对话框与状态栏详解：用法、阻塞机制及浏览器配置

本文简要介绍 JavaScript 中对话框与状态栏的相关功能。

JavaScript 对话框基础

JavaScript 对话框基础：

• 三种对话框图示：

  在客户端浏览器中，Window 对象提供了三种常用的方法用于弹出简单对话框，分别是 alert()、confirm() 和 prompt()。其中，alert() 用于向用户展示提示消息；confirm() 要求用户点击“确认”或“取消”按钮以做出选择；prompt() 则允许用户输入字符串。以下三张图分别展示了这三种对话框的视觉效果。

  

  alert() 对话框示例

  
  
  

  confirm() 对话框示例

  
  
  

  prompt() 对话框示例

• 三种对话框简介：

  alert() 方法弹出的对话框仅用于显示提示信息，起到提醒用户的作用。

  confirm() 方法用于向用户询问确认信息，界面包含“确认”和“取消”两个按钮。其逻辑类似于 if/else 结构：若用户点击“确认”，程序将继续执行后续代码；若点击“取消”，则返回 false。

  prompt() 方法包含一个输入框，其返回值为用户在输入框中输入的内容，主要目的是获取用户的文本输入。

• 对话框阻塞进程简介：

  confirm() 和 prompt() 均会产生阻塞效应，即在用户关闭对话框之前，它们不会返回值。这意味着在对话框弹出期间，代码执行会暂停。如果当前文档正在加载，加载过程也会停止，直到用户完成交互并响应。由于返回值依赖于用户输入，这些方法必须等待用户操作才能返回，因此无法避免这种阻塞行为。

  在大多数浏览器中，alert() 同样会产生阻塞并等待用户关闭对话框。然而，在某些旧版浏览器中（如 UNIX 平台上的 Netscape 3 和 4），alert() 并不产生阻塞。不过，作者在 Fedora 11 环境下使用 Firefox 浏览器进行测试时，发现 alert() 确实会产生阻塞。尽管有作者指出存在差异，但实际测试中阻塞现象普遍存在。

在实际开发中，这种微小的浏览器兼容性差异很少引发严重问题。

以下是 alert()、confirm() 和 prompt() 的具体用法示例：

alert('这是一个alert提示，你滴明白？');

confirm('这是一个confirm提示，你是愿意看啊，还是愿意看啊？');

prompt('来，帅哥，告诉哥你的名字吧');

JavaScript 状态栏控制

JavaScript 状态栏控制：

通常，当鼠标悬停在超链接上时，浏览器状态栏会显示该链接指向的 URL。但有时状态栏显示的是自定义文本而非链接地址。

在 JavaScript 中，浏览器状态栏的内容由 Window 对象的 status 和 defaultStatus 两个属性控制。因此，可以通过 JavaScript 修改状态栏的默认行为，显示期望用户看到的信息。

status 属性主要用于存放瞬时消息，即仅在触发特定事件时才会改变状态栏显示内容。而 defaultStatus 属性指定了状态栏中默认显示的文本。只有在触发事件发生时，状态栏文本才会被 status 的值替换；否则，将一直显示 defaultStatus 指定的内容。

 
<!-- 
当鼠标悬停在上述代码对应的链接上时，状态栏会显示：鼠标放在这个链接上面，状态栏显示的内容。
--> 
<a href='https://www.jb51.net' target='_blank' onmouseover="window.status='鼠标放在这个链接上面，状态栏显示的内容。';return true;">本站</a>

上述示例中的事件处理程序必须包含 return true;，这通知浏览器在事件发生时不应执行默认动作，即不在状态栏中显示链接的 URL。如果忘记添加 return true;，浏览器将用其默认的 URL 覆盖处理程序在状态栏中显示的所有信息。

再来看一个 defaultStatus 的例子，将页面状态栏的默认值设定为：欢迎来到本站，小小子感谢您的到来。

defaultStatus = '欢迎来到本站，小小子感谢您的到来';

window.defaultStatus = defaultStatus;

代码演示及说明：

有时您可能无法在状态栏看到显示的信息，以下提供解决方法，希望能帮助到大家：

在 Firefox 中：

1. 进入工具 > 选项 (Tools > Options)

2. 点击内容 (Content) 选项卡

3. 确保已勾选 JavaScript 选项

4. 点击高级（位于启用 JavaScript 选项旁边）

5. 勾选“通过脚本更改状态栏文本” (Change status bar text) 选项

6. 点击确定保存设置

7. 再次点击确定

在 Internet Explorer 中：

1. 进入工具 > Internet 选项 (Tools > Internet Options)

2. 点击安全 (Security) 选项卡

3. 确保已选中/高亮“Internet”区域

4. 点击自定义级别… (Custom Level…)（这将启动 Internet 区域的设置）

5. 向下滚动直到看到“允许通过脚本更新状态栏” (Allow status bar updates via script)（位于脚本选项下）。点击启用 (Enable)

6. 点击确定保存设置

7. 再次点击确定