React.js中iframe如何跨域引用外部服务并绑定按钮事件监听器

问题根因 #

浏览器同源策略强制禁止跨域上下文的DOM直接访问，从iframe侧通过ownerDocument.defaultView拿到的永远是iframe自身的window对象，无法触达父页面的DOM元素，这是当前测试代码返回undefined的根本原因，该安全限制没有绕过方法。

可行实现方案（需外部服务侧配合修改代码） #

若可以推动外部服务的开发者调整父页面代码，可通过postMessage API实现跨上下文通信，具体实现逻辑如下：

1. 外部服务父页面需要添加的代码 #

// 父页面按钮点击时主动向iframe发送通知
document.querySelector('.OgETmrvExa').addEventListener('click', () => {
  // 第二个参数替换为iframe的实际源地址
  document.querySelector('iframe').contentWindow.postMessage({ type: 'OUTER_BUTTON_CLICK' }, 'https://your-iframe-domain.com');
});

2. iframe侧React适配代码 #

import { useEffect } from "react";

const App = props => {
  useEffect(() => {
    const handleOuterMessage = (event) => {
      // 安全校验：只处理来自信任父域的消息，替换为外部服务的实际域名
      if (event.origin !== 'https://outer-service-domain.com') return;
      if (event.data?.type === 'OUTER_BUTTON_CLICK') {
        // 此处编写外部按钮点击后需要执行的iframe内逻辑
        console.log('外部服务按钮被点击');
      }
    };

    window.addEventListener('message', handleOuterMessage);
    // 组件卸载时移除监听避免内存泄漏
    return () => window.removeEventListener('message', handleOuterMessage);
  }, []);

  return (
    <div className="parent">
      <div className="app__main">
        <h3>React Project</h3>
      </div>
    </div>
  );
};
export default App;

无外部服务配合的情况 #

如果完全无法修改外部服务的代码，该需求没有实现可能，浏览器的安全规则不允许跨域iframe操作父页面的任何内容。

内容的提问来源于stack exchange，提问作者오승현