自定义showWin调用window.open无法按指定尺寸弹窗及关闭问题排查

一、弹窗尺寸始终全屏的修复 #

1. 检查自定义showWin函数的实现逻辑 #

问题核心通常是showWin调用window.open时未正确配置窗口特性参数，现代浏览器会忽略未明确禁用默认组件的宽高设置，需补充完整控制项：

function showWin(targetUrl, winWidth, winHeight) {
  // 强制浏览器应用自定义宽高，禁用默认窗口组件
  const windowFeatures = `width=${winWidth},height=${winHeight},toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes`;
  return window.open(targetUrl, 'SecurePopup', windowFeatures);
}

• 必须显式关闭toolbar、menubar等默认模块，否则浏览器会启用默认布局覆盖自定义尺寸。
• 固定窗口名称（如SecurePopup）避免重复创建窗口，也便于后续控制。

2. 验证后台VB生成的JS代码正确性 #

排查SecCheck生成的调用代码是否存在参数传递错误：

• 错误示例：showWin(886, 505)（缺少目标URL参数）
• 正确示例：showWin('/secure-page', 886, 505)

二、弹窗无法用self.close()关闭的修复 #

1. 修正弹窗内的关闭逻辑 #

现代浏览器仅允许关闭由当前脚本通过window.open创建的窗口，替换self.close()为明确的窗口对象调用：

// 弹窗内部关闭按钮逻辑
document.querySelector('.close-btn').addEventListener('click', function() {
  window.close();
});

2. 父页面主动控制关闭（可选） #

调用showWin时保存窗口对象，后续可从父页面触发关闭：

// 父页面代码
const securePopup = showWin('/secure-page', 886, 505);
// 需要关闭时执行
securePopup.close();

3. 处理iframe嵌套场景 #

若安全页面嵌套在弹窗的iframe中，需通过顶层窗口对象关闭：

// iframe内的关闭逻辑
window.top.close();

注意：此操作需满足同源策略，否则浏览器会阻止跨域窗口关闭。

三、替代IE专属showModalDialog的现代方案 #

如果需要模态窗口效果（阻止父页面操作），推荐使用HTML5原生<dialog>元素，无需依赖独立弹窗，兼容性更好：

<!-- 父页面嵌入模态框 -->
<dialog id="SecureModal" style="width: 886px; height: 505px; border: none; padding: 0;">
  <iframe src="/secure-page" width="100%" height="100%" frameborder="0"></iframe>
  <button style="position: absolute; top: 10px; right: 10px;" onclick="document.getElementById('SecureModal').close()">关闭</button>
</dialog>

<script>
function showWin(winWidth, winHeight) {
  const modal = document.getElementById('SecureModal');
  modal.style.width = `${winWidth}px`;
  modal.style.height = `${winHeight}px`;
  modal.showModal();
}
</script>

• <dialog>支持原生模态效果，无需额外遮罩层。
• 自定义宽高直接生效，关闭逻辑可靠，兼容所有现代浏览器（不含IE，IE已停止支持）。

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