请教window.showModalDialog与window.open的区别及返回值

核心区别 #

• 模态交互特性

  • window.showModalDialog 是严格的模态对话框：打开后会完全阻塞父页面的所有用户交互，必须关闭该对话框才能继续操作父页面。
  • window.open() 是非模态窗口：打开新窗口后，父页面和新窗口可同时被操作，互相不阻塞。

• 浏览器兼容性

  • window.showModalDialog 已被Web标准废弃，Chrome、Firefox等现代浏览器均已移除支持，仅部分旧版IE可能残留兼容。
  • window.open() 是浏览器通用支持的标准API，所有现代浏览器都能正常运行。

• 自定义程度

  • showModalDialog 的窗口样式、尺寸、工具栏等受浏览器限制极大，几乎无法自定义，更贴近内嵌的系统级模态框。
  • window.open() 可通过第三个参数配置窗口的宽度、高度、是否显示工具栏/滚动条等，自定义自由度很高。

• 数据传递逻辑

  • showModalDialog 支持直接的数据双向传递：第二个参数可向对话框传值，对话框通过window.returnValue设置返回结果，关闭后父页面直接获取该值。
  • window.open() 没有直接的返回值通道，需要通过postMessage、全局变量或URL参数实现父子窗口的数据交互。

返回值说明 #

window.showModalDialog 的返回值 #

调用后会等待对话框关闭，返回对话框页面中通过window.returnValue设置的值；若未设置，则返回undefined。示例：

// 父页面代码
const dialogResult = window.showModalDialog('./dialog-page.html', {userId: 123});
console.log(dialogResult); // 对话框关闭后输出设置的返回值

// 对话框页面代码
window.returnValue = {status: 'success', data: '处理完成'};
window.close();

window.open() 的返回值 #

调用后立即返回新窗口的Window对象引用（无论新窗口是否加载完成），可通过该引用操作新窗口的DOM或监听事件；若浏览器因安全策略阻止弹窗，则返回null。示例：

const newWin = window.open('./new-page.html', '_blank', 'width=600,height=400');
if (newWin) {
  newWin.document.title = '自定义新窗口标题';
  newWin.onbeforeunload = () => {
    console.log('新窗口即将关闭');
  };
} else {
  console.log('弹窗被浏览器拦截');
}

内容的提问来源于stack exchange，提问作者Asrar Khan