如何在React组件中运行包含document.write的第三方脚本

方案1：临时劫持document.write（首推，改造成本最低） #

该方案可以完全规避React环境下document.write执行异常的问题，无需改造第三方脚本逻辑，也不存在iframe方案的跨域、跳转限制缺陷。

import { useEffect, useRef } from 'react';

const ThirdPartyWidget = () => {
  const widgetContainer = useRef(null);

  useEffect(() => {
    const container = widgetContainer.current;
    if (!container) return;

    // 保存原生document.write方法
    const nativeWrite = document.write;
    // 临时劫持write，将内容输出到指定容器
    document.write = (content) => {
      container.innerHTML += content;
    };

    // 动态创建第三方script标签
    const thirdScript = document.createElement('script');
    thirdScript.src = 'https://some.domain/script.js';
    // 脚本加载完成/失败后恢复原生方法，避免全局污染
    thirdScript.onload = thirdScript.onerror = () => {
      document.write = nativeWrite;
    };

    container.appendChild(thirdScript);

    // 组件卸载时清理
    return () => {
      document.write = nativeWrite;
      container.innerHTML = '';
    };
  }, []);

  return <div ref={widgetContainer} />;
};

export default ThirdPartyWidget;

方案优势：第三方脚本依赖的jQuery、内置动态token表单都可以正常运行，表单提交跳转默认走顶层窗口，完全兼容当前需求。

方案2：dangerouslySetInnerHTML直接注入 #

如果不需要额外控制脚本加载逻辑，也可以直接通过React的内置属性注入script标签，适合仅需单次加载的场景：

const ThirdPartyWidget = () => {
  return (
    <div 
      dangerouslySetInnerHTML={{
        __html: '<script src="https://some.domain/script.js"></script>'
      }}
    />
  );
};

注意：仅在第三方脚本来源完全可信的场景下使用该方案，避免XSS安全风险

可选优化：强制表单新标签页打开 #

如果需要第三方表单提交后在新标签页打开，可在方案1的脚本加载完成回调中新增表单属性修改逻辑：

thirdScript.onload = () => {
  document.write = nativeWrite;
  // 给第三方表单新增新标签打开属性
  const formEl = container.querySelector('form');
  formEl && formEl.setAttribute('target', '_blank');
};

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