ReactJS中iframe的替代方案：解决OpenReplay无法识别iframe的问题

1. 使用官方Embed Widget/API（优先推荐） #

Bing Translator #

Bing Translator提供官方嵌入能力，可直接集成到React组件中，无需依赖iframe。你可以通过动态加载官方脚本并初始化widget实现：

import { useEffect } from 'react';

const BingTranslatorWidget = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://www.bing.com/translator/api/embed/v1/translator.js';
    script.async = true;
    script.onload = () => {
      window.BingTranslator.TranslateElement({
        from: 'en',
        to: 'zh',
        autoDetect: true,
        element: document.getElementById('bing-translator-container')
      });
    };
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
      if (window.BingTranslator) delete window.BingTranslator;
    };
  }, []);

  return <div id="bing-translator-container"></div>;
};

export default BingTranslatorWidget;

该方案将翻译控件直接渲染在当前页面DOM中，所有内容都处于OpenReplay可录制范围内。

Bing Images #

Bing Images无直接嵌入widget，但可调用Bing Image Search API获取图片数据，再通过React组件自定义渲染：

import { useState, useEffect } from 'react';

const BingImagesGallery = ({ searchQuery }) => {
  const [images, setImages] = useState([]);

  useEffect(() => {
    const fetchImages = async () => {
      const API_KEY = '你的Bing搜索API密钥';
      const response = await fetch(
        `https://api.bing.microsoft.com/v7.0/images/search?q=${encodeURIComponent(searchQuery)}`,
        { headers: { 'Ocp-Apim-Subscription-Key': API_KEY } }
      );
      const data = await response.json();
      setImages(data.value || []);
    };

    if (searchQuery) fetchImages();
  }, [searchQuery]);

  return (
    <div className="images-gallery">
      {images.map(img => (
        <img
          key={img.id}
          src={img.thumbnailUrl}
          alt={img.name}
          onClick={() => window.open(img.contentUrl, '_blank')}
          style={{ cursor: 'pointer', margin: '8px', width: '200px' }}
        />
      ))}
    </div>
  );
};

export default BingImagesGallery;

自行渲染图片列表完全可控，所有DOM元素均在当前页面内，OpenReplay可完整录制交互过程。

2. React Portal（仅适允许跨域的第三方页面） #

若部分Bing服务无API只能嵌入页面，可尝试用React Portal将第三方页面内容嵌入当前DOM树，但需目标页面允许跨域访问（否则会触发CORS错误）：

import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

const EmbeddedBingPage = ({ url }) => {
  const [content, setContent] = useState(null);

  useEffect(() => {
    const fetchContent = async () => {
      try {
        const response = await fetch(url);
        const html = await response.text();
        const container = document.createElement('div');
        container.innerHTML = html;
        setContent(container);
      } catch (err) {
        console.error('加载页面失败:', err);
      }
    };

    fetchContent();
  }, [url]);

  return content ? createPortal(content, document.body) : <div>加载中...</div>;
};

export default EmbeddedBingPage;

⚠️ 注意：Bing官方页面大多不允许跨域请求，此方案仅作备选。

3. 基于SDK封装自定义React组件 #

对于提供SDK的服务（如Bing Translator），可直接集成SDK并自定义UI：

import { useState } from 'react';

const CustomBingTranslator = ({ text }) => {
  const [translatedText, setTranslatedText] = useState('');

  const translate = async () => {
    const API_KEY = '你的Bing翻译API密钥';
    const response = await fetch(
      'https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&from=en&to=zh',
      {
        method: 'POST',
        headers: {
          'Ocp-Apim-Subscription-Key': API_KEY,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify([{ Text: text }])
      }
    );
    const data = await response.json();
    setTranslatedText(data[0].translations[0].text);
  };

  return (
    <div>
      <p>原文: {text}</p>
      <button onClick={translate}>翻译</button>
      {translatedText && <p>译文: {translatedText}</p>}
    </div>
  );
};

export default CustomBingTranslator;

该方案完全自定义交互逻辑与UI，所有操作均在React组件内完成，OpenReplay可完整录制。

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