Javascript Alert()方法中的HTML标签

JavaScript Alert() 方法中的 HTML 标签

基础概念

alert() 是 JavaScript 中的一个全局方法，用于在浏览器中显示一个带有指定消息和确定按钮的警告对话框。它是一个阻塞式的模态对话框，会暂停 JavaScript 执行直到用户点击确定按钮。

HTML 标签在 alert() 中的行为

默认情况下，alert() 方法不会解析 HTML 标签，而是将它们作为纯文本显示。例如：

alert("<b>Hello</b> World");

这将显示文本 <b>Hello</b> World 而不是加粗的 "Hello"。

为什么 alert() 不解析 HTML

安全考虑：解析 HTML 可能导致 XSS (跨站脚本攻击) 漏洞
设计初衷：alert() 主要用于简单的文本提示，不是富文本显示
一致性：保持跨浏览器行为一致

替代方案

如果需要显示富文本内容，可以考虑以下替代方案：

1. 使用自定义模态框

function showRichAlert(content) {
  const modal = document.createElement('div');
  modal.style.position = 'fixed';
  modal.style.top = '0';
  modal.style.left = '0';
  modal.style.width = '100%';
  modal.style.height = '100%';
  modal.style.backgroundColor = 'rgba(0,0,0,0.5)';
  modal.style.display = 'flex';
  modal.style.justifyContent = 'center';
  modal.style.alignItems = 'center';
  modal.style.zIndex = '1000';
  
  const contentBox = document.createElement('div');
  contentBox.style.backgroundColor = 'white';
  contentBox.style.padding = '20px';
  contentBox.style.borderRadius = '5px';
  contentBox.innerHTML = content;
  
  const closeBtn = document.createElement('button');
  closeBtn.textContent = 'OK';
  closeBtn.onclick = function() {
    document.body.removeChild(modal);
  };
  
  contentBox.appendChild(closeBtn);
  modal.appendChild(contentBox);
  document.body.appendChild(modal);
}

// 使用示例
showRichAlert('<h1>标题</h1><p>这是一个<b>富文本</b>提示框</p>');

2. 使用第三方库

如 SweetAlert2 等库提供了丰富的提示框功能：

// 需要先引入 SweetAlert2 库
Swal.fire({
  title: '<strong>HTML <u>示例</u></strong>',
  icon: 'info',
  html: '你可以使用 <b>粗体</b>, <i>斜体</i> 和其他 HTML 标签',
  showCloseButton: true,
  showCancelButton: true,
  confirmButtonText: '<i class="fa fa-thumbs-up"></i> 确定'
});