如何在React组件中添加JotForm生成的iframe？

当然可以把JotForm生成的iframe嵌入到React组件里！下面给你两种实用的实现方案，你可以根据项目情况选择：

方案1：直接使用dangerouslySetInnerHTML（快速实现） #

React默认会转义HTML内容，如果你想直接插入完整的iframe代码（包括配套脚本），可以用dangerouslySetInnerHTML属性。注意：只有当你完全信任这段HTML内容时才用这个方法，避免XSS风险。

示例代码：

import React from 'react';

const JotFormEmbed = () => {
  const formHTML = `
    <iframe id="JotFormIFrame-81003857231348" 
            onload="window.parent.scrollTo(0,0)" 
            allowtransparency="true" 
            allowfullscreen="true" 
            allow="geolocation; microphone; camera" 
            src="https://form.jotformeu.com/81003857231348" 
            frameborder="0" 
            style="width: 1px; min-width: 100%; height:539px; border:none;" 
            scrolling="no">
    </iframe>
    <script type="text/javascript">
      var ifr = document.getElementById("JotFormIFrame-81003857231348");
      if (ifr) {
        // 这里可以补充原脚本的剩余逻辑，比如自适应高度的代码
        ifr.style.height = "539px"; // 或者根据实际需求调整
      }
    </script>
  `;

  return <div dangerouslySetInnerHTML={{ __html: formHTML }} />;
};

export default JotFormEmbed;

方案2：使用react-iframe库（更符合React风格） #

如果你想更规范地管理iframe，推荐用专门的React iframe组件库，这样不需要直接操作HTML字符串，更安全易维护。

步骤1：安装依赖 #

npm install react-iframe
# 或者用yarn
yarn add react-iframe

步骤2：编写组件 #

import React, { useEffect, useRef } from 'react';
import Iframe from 'react-iframe';

const JotFormEmbed = () => {
  const iframeRef = useRef(null);

  // 组件挂载后执行JotForm的配套脚本逻辑
  useEffect(() => {
    const ifr = iframeRef.current;
    if (ifr) {
      // 这里可以添加原脚本的剩余逻辑，比如自适应高度
      ifr.style.height = "539px";
      // 如果原脚本有其他逻辑，比如监听高度变化，也可以在这里实现
    }
  }, []);

  return (
    <Iframe
      ref={iframeRef}
      id="JotFormIFrame-81003857231348"
      onLoad={() => window.parent.scrollTo(0,0)}
      allowTransparency="true"
      allowFullScreen="true"
      allow="geolocation; microphone; camera"
      url="https://form.jotformeu.com/81003857231348"
      frameBorder="0"
      style={{ width: '1px', minWidth: '100%', height: '539px', border: 'none' }}
      scrolling="no"
    />
  );
};

export default JotFormEmbed;

注意事项 #

• 确保你的React项目没有CSP（内容安全策略）限制该JotForm域名的iframe加载，如果有需要在CSP配置中添加允许的域名。
• 如果iframe高度需要自适应，可以参考JotForm官方提供的自适应脚本，把相关逻辑放到useEffect或者原脚本的位置。

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