如何实现点击iframe内的按钮时触发父页面的指定函数？

同域场景（父页面与iframe域名/端口/协议完全一致） #

这是最简单的实现方式，只需分别在两个页面加少量代码即可：

1. 父页面 publish-an-ad.html 中添加全局触发方法：

// 可写在页面任意全局作用域的JS位置
function iframeBtnClickHandler() {
  alert('iframe内的结账按钮已被点击')
}

2. iframe页面 checkout-1.html 中给按钮绑定点击事件：

// 建议写在body标签末尾，或包裹在DOMContentLoaded回调中
document.querySelector('.myBtn').addEventListener('click', () => {
  // 同域下可直接调用父页面的全局方法
  parent.iframeBtnClickHandler()
})

跨域场景（父页面与iframe域名/端口/协议任意一项不同） #

需要使用HTML5标准的postMessageAPI实现安全跨域通信：

1. iframe页面 checkout-1.html 中绑定点击事件发送消息：

document.querySelector('.myBtn').addEventListener('click', () => {
  // 第二个参数生产环境请替换为父页面的实际域名，避免消息泄露
  parent.postMessage('checkoutBtnClicked', '*')
})

2. 父页面 publish-an-ad.html 中监听消息触发提示：

window.addEventListener('message', (e) => {
  // 生产环境务必打开下方注释校验消息来源域名，避免安全风险
  // if(e.origin !== '你的iframe页面实际部署域名') return
  if(e.data === 'checkoutBtnClicked') {
    alert('iframe内的结账按钮已被点击')
  }
})

注意事项 #

• 所有DOM操作相关的JS代码请确保执行时目标DOM已经渲染完成，否则会出现找不到元素的报错
• 跨域场景下的postMessage必须做来源校验，避免收到恶意构造的消息触发异常逻辑

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