window.addEventListener('load') 二次打开新窗口页面空白问题

• 你调用window.open()时传入了固定的第二个参数"compare"，这是窗口的唯一标识名。当浏览器检测到同名窗口已经存在时，第二次及后续点击只会把已有窗口拉到前台，不会重新加载compare.html页面，因此你绑定的load事件永远不会触发，内容注入逻辑完全不执行，最终出现页面空白。
• 首次点击时窗口是从零新建的，会完整走页面加载流程触发load事件，所以第一次功能正常。

方案1：复用单窗口（推荐，体验最好） #

保留原有单窗口复用的逻辑，不重复弹出新窗口，同时兼容窗口已加载完成的场景，代码如下：

const rendered = compareTpl(articleObj);
const compareWin = window.open("compare.html", "compare", "width=960, height=800, scrollbars=yes");

// 抽离公共的内容注入逻辑
function setCompareContent() {
  const container = compareWin.document.getElementById("mdpo");
  if (container) container.innerHTML = rendered;
}

// 先判断窗口是否已经加载完成，加载完直接注入内容，否则监听load事件
if (compareWin.document.readyState === "complete") {
  setCompareContent();
} else {
  // once:true 表示事件触发一次后自动解绑，避免重复绑定造成内存泄漏
  compareWin.addEventListener("load", setCompareContent, { once: true });
}

方案2：每次点击打开全新窗口 #

如果不需要保留之前打开的对比窗口，可以把窗口名参数改成_blank，强制每次点击都新建窗口，这样每次都会触发load事件：

const rendered = compareTpl(articleObj);
// 第二个参数传_blank，强制打开新窗口
const compareWin = window.open("compare.html", "_blank", "width=960, height=800, scrollbars=yes");

compareWin.addEventListener("load", function() {
  compareWin.document.getElementById("mdpo").innerHTML = rendered;
}, { once: true });

注意：该方案会导致用户多次点击时弹出多个窗口，交互体验弱于方案1

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