jQuery：如何实现弹窗按钮点击触发父页面函数？

没问题，这个需求其实很常见，核心是要利用浏览器提供的window.opener对象来关联弹窗和父页面的上下文，我给你整理好可行的实现方案：

核心修改点 #

你原来的弹窗按钮代码无法生效，是因为弹窗是独立的浏览器窗口，它的全局作用域和父页面完全分离，直接调用doSomeThingInParentPage()会在弹窗自己的环境里找这个函数，自然找不到。

正确的做法是通过window.opener访问打开当前弹窗的父窗口对象，然后调用它上面的全局函数：

$(document).on("click","buttonInNewWindow", function () {
    // 先做合法性检查，避免父页面已关闭或跨域导致的报错
    if (window.opener && typeof window.opener.doSomeThingInParentPage === 'function') {
        window.opener.doSomeThingInParentPage();
        // 如果需要触发后关闭弹窗，可以加这行
        // window.close();
    } else {
        console.error("无法调用父页面函数：可能是跨域访问，或者父页面已关闭");
    }
    return false;
});

完整代码示例 #

父页面代码 #

// 父页面定义的全局函数
function doSomeThingInParentPage() {
    console.log("父页面的函数被弹窗触发了！");
    // 这里写你的业务逻辑，比如更新页面内容、发送请求等
}

// 父页面打开弹窗的按钮事件
$(document).on("click","buttonInParentPage", function () {
    window.open("你的弹窗页面URL", "popupWindow", "width=600,height=300,scrollbars=yes");
    return false;
});

弹窗页面代码 #

// 弹窗页面的按钮点击事件
$(document).on("click","buttonInNewWindow", function () {
    if (window.opener && typeof window.opener.doSomeThingInParentPage === 'function') {
        window.opener.doSomeThingInParentPage();
    } else {
        console.error("调用失败，请检查父页面是否存在且同域");
    }
    return false;
});

关键注意事项 #

• 同源策略限制：父页面和弹窗页面必须是同域的（协议、域名、端口都一致），否则浏览器的安全机制会阻止你访问window.opener，这是无法绕过的安全限制。
• 边界情况处理：添加window.opener和函数存在性的检查，可以避免用户关闭父页面后，弹窗还在时点击按钮出现报错的情况。

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