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

没问题，这事儿其实很好解决，核心就是利用弹窗和父页面之间的窗口引用关系，下面分两种常见场景给你具体实现代码：

一、同域场景（推荐，无跨域限制） #

首先要确保父页面的目标函数是全局可访问的（挂载到window对象上），然后弹窗通过window.opener对象就能直接调用父页面的函数。

父页面代码（保留原有弹窗逻辑，补充全局函数） #

// 父页面全局作用域定义要被调用的函数
function doSomeThingInParentPage() {
  // 这里写你的业务逻辑，比如：
  alert("父页面的函数被执行了！");
  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 && !window.opener.closed) {
    // 直接通过opener调用父页面的全局函数
    window.opener.doSomeThingInParentPage();
  } else {
    alert("父页面已经关闭，无法执行操作");
  }
  return false;
});

二、跨域场景（弹窗和父页面域名不同） #

如果弹窗和父页面是不同域名，浏览器的同源策略会阻止直接访问window.opener的函数，这时候需要用postMessage来实现跨窗口通信：

父页面代码（监听消息事件） #

// 父页面全局函数
function doSomeThingInParentPage() {
  alert("父页面的函数被跨域调用了！");
}

// 监听弹窗发来的消息
window.addEventListener("message", function(event) {
  // 验证消息来源，防止恶意网站发送消息
  if (event.origin === "https://弹窗的完整域名.com") {
    // 判断消息内容，触发对应函数
    if (event.data === "triggerParentFunction") {
      doSomeThingInParentPage();
    }
  }
});

// 打开弹窗的代码不变
$(document).on("click", "buttonInParentPage", function () {
  window.open("跨域弹窗的url", "popupWindow", "width=600,height=300,scrollbars=yes");
  return false;
});

弹窗页面代码（发送消息给父页面） #

$(document).on("click", "buttonInNewWindow", function () {
  // 发送消息到父页面，第二个参数是父页面的域名，也可以用"*"（不推荐，不安全）
  window.opener.postMessage("triggerParentFunction", "https://父页面的完整域名.com");
  return false;
});

注意事项 #

• 同域场景下，一定要保证父页面的函数是全局的，不要放在闭包里，不然弹窗访问不到。
• 跨域场景下，必须指定正确的origin参数，不要用*，避免安全风险。

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