IE9与Chrome中window.open意外打开两个窗口的技术问题

看起来你遇到的问题是明明只想打开一个替换后的URL窗口，结果却弹出了两个不同的窗口——一个是原host的地址，一个是替换后的目标地址。结合你描述的场景和代码，我来帮你分析下可能的原因和解决办法：

最可能的触发原因 #

1. 按钮默认行为导致重复触发
   如果你的触发元素是<button>标签，而且没指定type="button"，那它默认是type="submit"。如果这个按钮在<form>标签里，点击时会同时执行onclick里的openWin函数，还会触发表单提交动作——这就可能导致两次窗口打开（或者一次是函数打开的，一次是表单提交跳转的）。

2. 函数内部不小心调用了两次window.open
   从你描述的结果看，两个窗口分别对应原host和替换后的host，大概率是你的openWin函数里同时调用了两次window.open，一次用了host1，一次用了host2，只是你没注意到。

修正后的代码示例 #

先给你一个确保只会打开单个窗口的版本：

JavaScript代码

function openWin() {
  // 定义原host
  var host1 = "https://home-page.com";
  // 替换生成目标host
  var host2 = host1.replace("home", "homet3");
  // 只调用一次window.open，指定窗口名称确保复用同一窗口
  window.open(`${host2}/me/myself/?browserOffset=0`, "myTargetWindow");
}

HTML触发元素

如果是用按钮触发，一定要加上type="button"避免默认提交行为：

<button type="button" onclick="openWin()">打开目标窗口</button>

额外排查建议 #

• 检查你的原始代码，确认openWin函数里只调用了一次window.open，没有同时用到host1和host2去打开窗口
• 给window.open的第二个参数（窗口名称）设置一个固定值，这样即使多次触发，也会在同一个窗口加载新URL，不会新建窗口
• 如果是用事件监听绑定的函数，检查是否重复绑定了openWin（比如多次调用addEventListener绑定同一个事件）

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