嘿，我刚好处理过类似的需求，咱们来一步步解决这个问题——既要把React组件嵌入到空src的iframe里，又要防止用户右键新窗口打开，其实有几个靠谱的方案：

本质就是把iframe变成一个“空白容器”，然后手动把你的React组件代码（bundle.js）注入进去，完全不依赖真实的src地址，从根源上避免用户右键打开对应页面。

方案1：直接生成空iframe并注入Bundle #

这是最直接的实现方式，步骤非常清晰：

1. 创建空iframe：用about:blank作为src（比空字符串更兼容，避免部分浏览器的默认行为），同时设置样式隐藏边框、调整尺寸。
2. 注入Bundle和样式：等iframe加载完成后，获取它的document对象，动态创建script标签引入你的bundle，或者直接内联bundle内容（更安全，不会暴露外部地址）。
3. 阻止右键菜单：给iframe绑定oncontextmenu事件，直接阻止默认的右键行为，彻底切断用户“在新窗口打开”的入口。

代码示例（父页面） #

function embedReactComponent() {
  // 创建空iframe
  const iframe = document.createElement('iframe');
  iframe.src = 'about:blank';
  iframe.style.width = '100%';
  iframe.style.height = '500px';
  iframe.style.border = 'none';
  
  // 阻止右键菜单
  iframe.oncontextmenu = (e) => {
    e.preventDefault();
    return false;
  };

  // iframe加载完成后注入内容
  iframe.onload = () => {
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    
    // 方式1：引入外部bundle（同域情况下推荐）
    const script = document.createElement('script');
    script.src = '/path/to/your/minified-bundle.js';
    
    // 方式2：内联bundle内容（完全隐藏地址，适合敏感场景）
    // script.textContent = '/* 这里粘贴压缩后的bundle.js全部内容 */';
    
    // 注入组件所需的样式（可选）
    const style = document.createElement('style');
    style.textContent = `
      .your-component-class {
        /* 组件样式 */
      }
    `;

    iframeDoc.head.appendChild(style);
    iframeDoc.head.appendChild(script);

    // 如果需要给组件传参，用postMessage通信
    iframe.contentWindow.postMessage(
      { type: 'INIT_PROPS', data: { title: '嵌入式组件' } },
      '*'
    );
  };

  // 把iframe挂载到页面容器
  document.getElementById('embed-container').appendChild(iframe);
}

// 调用执行
embedReactComponent();

方案2：构建UMD格式的React组件（更优雅的长期方案） #

如果你的组件需要频繁嵌入到不同页面，推荐把React组件打包成UMD格式——这种格式的bundle可以在浏览器、Node等多种环境运行，而且能直接通过全局变量调用初始化方法，更灵活。

步骤： #

1. 配置构建工具输出UMD：以Webpack为例，修改配置文件：

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'my-embedded-component.js',
    // 全局变量名称，iframe里可以直接调用
    library: 'MyEmbeddedComponent',
    libraryTarget: 'umd',
    globalObject: 'this' // 兼容不同环境的全局对象
  },
  // 其他配置...
};

2. 在iframe中初始化组件：注入UMD bundle后，直接调用全局方法初始化：

// 延续方案1的iframe.onload逻辑
iframe.onload = () => {
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  const script = document.createElement('script');
  script.src = '/path/to/my-embedded-component.js';
  
  script.onload = () => {
    // 调用UMD组件的初始化方法，传入容器和props
    iframe.contentWindow.MyEmbeddedComponent.init({
      container: iframeDoc.body,
      props: { /* 组件所需的props */ }
    });
  };
  
  iframeDoc.head.appendChild(script);
};

额外的加固技巧 #

• 禁用iframe内部的右键菜单：除了父页面的事件绑定，还可以在组件代码里添加document.oncontextmenu = e => e.preventDefault();，双重保险
• 隐藏iframe的src属性：用户查看元素时只会看到about:blank，没有实际页面地址，就算强行在新窗口打开也只是空白页面
• 处理跨域问题：如果bundle和父页面不同域，优先用内联bundle内容的方式，或者给bundle所在服务器配置CORS允许父页面域名访问

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