点击弹窗链接关闭弹窗后，如何实现父窗口页面跳转？

要实现这个需求，核心是利用**window.opener**对象——它是弹窗对打开它的父窗口的引用，通过它我们可以直接操控父窗口的跳转，再结合window.close()关闭弹窗即可。下面是两种常用的实现方式：

方式一：直接在链接的onclick中写逻辑 #

这种方式适合简单场景，代码直接嵌入HTML，快速实现需求：

<!-- 弹窗中的链接 -->
<a href="javascript:void(0)" onclick="jumpAndClose('https://your-target-url.com')">
  点击跳转并关闭弹窗
</a>

<script>
function jumpAndClose(targetUrl) {
  // 先确保父窗口还存在（未被用户手动关闭）
  if (window.opener && !window.opener.closed) {
    // 让父窗口跳转到指定URL
    window.opener.location.href = targetUrl;
  }
  // 关闭当前弹窗
  window.close();
}
</script>

方式二：使用事件监听（推荐，更符合现代JS规范） #

这种方式把逻辑和HTML结构分离，代码更易于维护和扩展：

<!-- 弹窗中的链接 -->
<a id="popup-jump-link" href="https://your-target-url.com">
  点击跳转并关闭弹窗
</a>

<script>
// 获取弹窗里的链接元素
const jumpLink = document.getElementById('popup-jump-link');

// 绑定点击事件
jumpLink.addEventListener('click', function(e) {
  // 阻止链接的默认跳转行为（我们要让父窗口跳转，而非弹窗自身）
  e.preventDefault();
  
  // 获取链接的目标URL
  const targetUrl = this.href;
  
  // 操作父窗口跳转（先判断父窗口是否有效）
  if (window.opener && !window.opener.closed) {
    window.opener.location.href = targetUrl;
  }
  
  // 关闭当前弹窗
  window.close();
});
</script>

关键细节说明 #

• 检查父窗口状态：一定要判断window.opener是否存在且未被关闭，避免父窗口已经关闭时出现JS报错。
• 执行顺序：先操作父窗口跳转，再关闭弹窗是更稳妥的选择——虽然实际测试中顺序反过来也能生效，但先完成跳转逻辑再关闭弹窗，能避免极端情况下的异常。
• 跨域场景提示：如果父窗口和弹窗属于不同域名，浏览器的同源策略会限制window.opener.location.href的操作，这种情况需要通过postMessage通信来实现，不过同域名场景下上面的代码可以直接正常工作。

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