JS实现关闭子窗口并刷新父窗口的兼容方案

需求背景与技术难点

在后台项目开发过程中，遇到一项具体需求：用户点击“选择模板”按钮时，系统会弹出一个新窗口；当用户在新窗口中选定模板并点击“确定”后，需要自动关闭当前新窗口，同时让原始父窗口自动显示用户在新窗口中的选择结果。

为实现这一功能，需要解决的核心技术问题是：如何通过JavaScript代码在关闭子窗口的同时，确保父窗口能够正确刷新以反映最新数据。

常见方案及报错分析

经过网络搜索与多种尝试，最初考虑了以下几种常见实现路径：

window.opener.location.href = window.opener.location.href;

第一种方案是在子窗口的关闭函数中执行特定代码，旨在实现父窗口的刷新。

function closeMeAndReloadParent(){
  opener.location.reload();
  window.close();
}

第二种方案同样是在子窗口的关闭逻辑中加入相关代码，尝试触发父页面重载。

此外还尝试了直接调用window.opener.location.reload();以及window.opener.reload();等方式。

然而，实际测试结果显示上述所有方案均未能成功，并统一报出类似的错误信息。

控制台报错内容为：scrollbymyself.html:96 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.，这表明浏览器安全策略阻止了跨源访问。

尽管不确定是具体实现方式存在缺陷，还是受限于其他未知环境因素，但鉴于业务需求必须解决，经过亲身实践与反复调试，总结出了一套可行的替代方法。尽管该方法存在一定局限性，但确实能够满足当前的功能需求。

可行解决方案与代码实现

以下是父界面（主窗口）的关键代码实现。

<span onclick="openNewWindow()">点击打开新窗口</span>
<input type="text" class="parent-input">
<script>
  function openNewWindow() {
    document.querySelector(".parent-input").focus()
    window.open("scrollbymyself.html", "new window");
  }
  document.querySelector(".parent-input").onfocus = function () {
    console.log("获取到了焦点，可以在这里写逻辑代码")
  }
  console.log("页面重新刷新")
</script>

以下是子界面（新窗口）的关键代码实现。

<span onclick="closeCurrentWindow()">点击关闭当前窗口，并且更新上一个窗口的信息</span>
<script>
  function closeCurrentWindow() {
    console.log(window)
    opener.location.reload();
    window.close()
  }
</script>

将上述代码集成到项目中，即可实现预期功能。如果希望父界面上不显示用于触发事件的Input元素，可以通过添加CSS属性opacity: 0;将其设为透明，从而保持界面整洁。

在实施过程中，需注意以下关键细节：

如果直接给Input元素添加display: none;属性，将导致其无法触发获取焦点的事件函数，进而无法执行后续的刷新逻辑。

至此，关于JS关闭子窗口并刷新父窗口的实现示例介绍完毕。如需了解更多相关技术细节，建议查阅本站过往文章或继续浏览后续内容，感谢大家的支持。