React组件嵌入iframe及引入外部脚本的问题求助

方案一：组件内动态创建脚本（无依赖） #

在组件的useEffect钩子中动态生成脚本标签，确保全局变量先定义再加载外部脚本，同时处理组件卸载时的清理，避免重复注入：

import { useEffect } from 'react';
import styles from './YourComponent.module.css'; // 替换为你的样式文件路径

export default function Newsletter({ page }) {
  useEffect(() => {
    // 创建定义全局变量的脚本
    const configScript = document.createElement('script');
    configScript.type = 'text/javascript';
    configScript.textContent = `
      var zmailApp = "ODA0MTc4NTAxMg";
      var lang = "df";
    `;
    document.head.appendChild(configScript);

    // 创建加载外部脚本的标签
    const externalScript = document.createElement('script');
    externalScript.type = 'text/javascript';
    externalScript.src = 'https://www.scripts.net/scripts/newAppV2.js';
    externalScript.async = false; // 强制按顺序加载
    document.head.appendChild(externalScript);

    // 组件卸载时清理脚本与全局变量
    return () => {
      document.head.removeChild(configScript);
      document.head.removeChild(externalScript);
      delete window.zmailApp;
      delete window.lang;
    };
  }, []); // 空依赖确保只执行一次

  return (
    <div className={`${styles.newsletter} newsletter-form`}>
      <div className={styles.newsletter__row}>
        <iframe
          src="https://blablabla.com"
          width="800"
          height="800"
          frameborder="0"
          title="Your iframe title"
        ></iframe>
      </div>
    </div>
  );
}

方案二：直接在Pug根模板中添加脚本 #

如果该脚本是全局依赖，或不想在组件内处理逻辑，直接修改Pug根文件（比如layout.pug）：

html
  head
    //- 其他头部内容
    script.
      var zmailApp = "ODA0MTc4NTAxMg";
      var lang = "df";
    script(src="https://www.scripts.net/scripts/newAppV2.js")
  body
    #root //- React应用挂载节点

这种方式会让脚本在React应用初始化前就加载完成，全局变量提前就绪，无需组件内额外处理。

方案三：修正react-helmet的用法 #

如果坚持使用react-helmet，需确保脚本顺序正确（先定义变量再加载外部脚本），并设置同步加载避免顺序混乱：

import { Helmet } from 'react-helmet';
import styles from './YourComponent.module.css';

export default function Newsletter({ page }) {
  return (
    <>
      <Helmet>
        <script type="text/javascript">
          var zmailApp = "ODA0MTc4NTAxMg";
          var lang = "df";
        </script>
        <script type="text/javascript" src="https://www.scripts.net/scripts/newAppV2.js" async={false}></script>
      </Helmet>
      <div className={`${styles.newsletter} newsletter-form`}>
        <div className={styles.newsletter__row}>
          <iframe
            src="https://blablabla.com"
            width="800"
            height="800"
            frameborder="0"
            title="Your iframe title"
          ></iframe>
        </div>
      </div>
    </>
  );
}

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