React项目加载Google转化第三方脚本遇document.write警告的解决办法

问题根源 #

Google的conversion.js脚本内部使用了document.write，而React组件渲染完成后，主文档已经处于关闭状态（document.readyState为complete）。异步加载的外部脚本此时调用document.write会触发警告，因为浏览器不允许在已关闭的文档上执行document.write（除非显式调用document.open，但这会清空整个页面）。

解决方案 #

1. 避免使用dangerouslySetInnerHTML，直接定义全局变量 #

原来的内联脚本只是定义全局变量，完全可以在React组件中直接挂载到window对象上，无需使用HTML插入：

import { useEffect } from 'react';

function GoogleConversionComponent() {
  useEffect(() => {
    // 定义Google转化所需的全局变量
    window.google_conversion_id = 'XXXX'; // 替换为你的实际ID
    window.google_custom_params = window.google_tag_params;
    window.google_remarketing_only = true;
  }, []);

  // 后续脚本加载逻辑...
}

2. 动态加载外部脚本并处理document.write #

方案A：临时重写document.write（轻量方案）

在加载conversion.js前，临时替换document.write，将其输出定向到隐藏容器，避免影响主文档：

import { useEffect } from 'react';

function GoogleConversionComponent() {
  useEffect(() => {
    // 步骤1：定义全局变量
    window.google_conversion_id = 'XXXX';
    window.google_custom_params = window.google_tag_params;
    window.google_remarketing_only = true;

    // 步骤2：临时重写document.write
    const originalWrite = document.write;
    document.write = (content) => {
      // 将脚本输出插入到隐藏div中，不影响主页面
      const hiddenContainer = document.createElement('div');
      hiddenContainer.style.display = 'none';
      hiddenContainer.innerHTML = content;
      document.body.appendChild(hiddenContainer);
    };

    // 步骤3：动态创建并加载脚本
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//www.googleadservices.com/pagead/conversion.js';
    
    // 脚本加载完成后恢复原document.write
    script.onload = () => {
      document.write = originalWrite;
    };
    script.onerror = () => {
      document.write = originalWrite;
    };

    document.body.appendChild(script);

    // 组件卸载时清理
    return () => {
      document.write = originalWrite;
      if (document.body.contains(script)) {
        document.body.removeChild(script);
      }
    };
  }, []);

  // 渲染noscript对应的图片（给禁用JS的用户）
  return (
    <div style={{ display: 'inline' }}>
      <img 
        height="1" 
        width="1" 
        style={{ borderStyle: 'none' }} 
        alt="" 
        src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXX/?value=0;guid=ON;script=0"
      />
    </div>
  );
}

方案B：使用iframe隔离脚本（更安全）

创建隐藏iframe，在iframe内部加载脚本，这样脚本的document.write只会影响iframe的独立文档，完全不会污染主页面：

import { useEffect } from 'react';

function GoogleConversionComponent() {
  useEffect(() => {
    // 创建隐藏iframe
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.style.height = '0';
    iframe.style.width = '0';
    document.body.appendChild(iframe);

    // 获取iframe的文档对象
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

    // 在iframe中写入所需脚本
    iframeDoc.open();
    iframeDoc.write(`
      <script type="text/javascript">
        var google_conversion_id = 'XXXX';
        var google_custom_params = window.parent.google_tag_params;
        var google_remarketing_only = true;
      </script>
      <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
    `);
    iframeDoc.close();

    // 组件卸载时移除iframe
    return () => {
      if (document.body.contains(iframe)) {
        document.body.removeChild(iframe);
      }
    };
  }, []);

  // 渲染noscript图片
  return (
    <div style={{ display: 'inline' }}>
      <img 
        height="1" 
        width="1" 
        style={{ borderStyle: 'none' }} 
        alt="" 
        src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXX/?value=0;guid=ON;script=0"
      />
    </div>
  );
}

关键说明 #

• 不要给conversion.js加async或defer：这类依赖全局变量的脚本需要按顺序执行，异步加载可能导致变量未定义就执行脚本。
• 直接渲染noscript图片：即使JS启用，这张1x1的图片加载不会有性能问题，同时兼容禁用JS的场景。

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