Edge/Chrome浏览器下showModalDialog及dialogArguments失效问题咨询

showModalDialog 是早已被主流现代浏览器废弃的非标准API，从Chrome 37版本开始，所有Chromium内核浏览器（包括新版Edge）已经彻底移除了该接口的原生支持，配套的全局dialogArguments参数传递能力也同步失效。该异常属于API兼容性问题，和业务代码本身的逻辑无关。

方案1：HTML原生<dialog>实现（推荐，同域场景改造成本最低） #

这是W3C标准原生支持的模态弹窗能力，完全可以覆盖原有模态阻塞交互、参数传递、结果回传的需求，还能通过CSS精准匹配原来配置的弹窗尺寸、居中、无状态栏/帮助栏等样式要求。
改造步骤：

• 父页面移除原有showModalDialog调用，新增<dialog>标签作为弹窗容器，内部用iframe加载目标弹窗页面，通过postMessage向iframe传递业务参数，调用showModal()方法即可打开带遮罩的模态窗口，自动阻塞下层页面交互。
  父页面核心参考代码：

<dialog id="cashDenomDialog" style="width:800px;height:600px;padding:0;border:none;border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,0.2);">
  <iframe id="denomIframe" style="width:100%;height:100%;border:none;" src=""></iframe>
</dialog>

// 原有需要传递给弹窗的业务参数
const dialogParams = {
  strDenomValues: strDenomValues,
  loginDivision: loginDivision,
  businessDate: businessDate,
  strCurrCode: strCurrCode,
  strCurrType: strCurrType,
  strCurrAmount: strCurrAmount,
  strDealType: strDealType
}
const dialogNode = document.getElementById('cashDenomDialog');
const iframeNode = document.getElementById('denomIframe');
// 加载弹窗页面地址
iframeNode.src = IAllURLs_URL_CASH_DENOMS;
// iframe加载完成后传递参数
iframeNode.onload = () => {
  iframeNode.contentWindow.postMessage({
    type: 'initDialog',
    payload: dialogParams
  }, window.location.origin);
}
// 打开模态窗，默认自动居中，自带模态遮罩
dialogNode.showModal();

// 监听弹窗返回的操作结果
window.addEventListener('message', (event) => {
  if(event.origin !== window.location.origin) return;
  if(event.data.type === 'closeDialog') {
    // 可通过event.data.result获取弹窗回传的业务结果
    dialogNode.close();
  }
})

• 弹窗页面对应改造，替换原有dialogArguments的取值逻辑，监听父页面传递的初始化参数即可，后续业务处理逻辑完全不需要改动。
  弹窗页面核心参考代码：

let pContents = null;
// 接收父页面传递的参数
window.addEventListener('message', (event) => {
  if(event.origin !== window.location.origin) return;
  if(event.data.type === 'initDialog') {
    pContents = event.data.payload;
    // 原有业务取值逻辑可直接复用
    var strDenoms = pContents.strDenomValues;
    divisionName = pContents.loginDivision;
    businessDate = pContents.businessDate;
    strCurrCode = pContents.strCurrCode;
    strCurrType = pContents.strCurrType;
    strCurrAmount = pContents.strCurrAmount;
    strDealType = pContents.strDealType;
  }
})

// 弹窗业务操作完成需要关闭时，向父页面发送关闭指令和回传结果
function dialogClose(returnData) {
  window.parent.postMessage({
    type: 'closeDialog',
    result: returnData
  }, window.location.origin);
}

如果需要匹配原有showModalDialog同步阻塞、等待弹窗返回结果再执行后续逻辑的特性，可以把上述逻辑封装为Promise调用，使用体验和原有接口几乎一致。

方案2：window.open 实现（适配跨域弹窗场景） #

如果弹窗页面和父页面不属于同域，无法通过iframe嵌套，可以使用window.open打开新标签页/窗口，同样通过postMessage完成参数传递和结果回传。该方案需要额外处理浏览器弹窗拦截提示、窗口失焦后层级置顶的逻辑，适配成本略高。

如果是企业内部强管控的旧系统短期没有改造资源，可以通过Chrome/Edge的企业组策略配置，临时启用showModalDialog的兼容支持。但该方案仅对受策略管控的企业内部浏览器生效，公网用户场景无法使用，且后续浏览器版本随时可能移除该兼容开关，不能作为长期解决方案。

内容的提问来源于stack exchange，提问作者rama rao