Javascript 将iframe添加到React组件

是否有任何方法可以将使用

jotform

生成的

iframe

添加到React组件

这是iframe的代码：

<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(window.location.href && window.location.href.indexOf("?") > -1) {
    var get = window.location.href.substr(window.location.href.indexOf("?") + 1);
    if(ifr && get.length > 0) {
      var src = ifr.src;
      src = src.indexOf("?") > -1 ? src + "&" + get : src  + "?" + get;
      ifr.src = src;
    }
  }
  window.handleIFrameMessage = function(e) {
    var args = e.data.split(":");
    if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); }
    if (!iframe) { return; }
    switch (args[0]) {
      case "scrollIntoView":
        iframe.scrollIntoView();
        break;
      case "setHeight":
        iframe.style.height = args[1] + "px";
        break;
      case "collapseErrorPage":
        if (iframe.clientHeight > window.innerHeight) {
          iframe.style.height = window.innerHeight + "px";
        }
        break;
      case "reloadPage":
        window.location.reload();
        break;
      case "loadScript":
        var src = args[1];
        if (args.length > 3) {
            src = args[1] + ':' + args[2];
        }
        var script = document.createElement('script');
        script.src = src;
        script.type = 'text/javascript';
        document.body.appendChild(script);
        break;
      case "exitFullscreen":
        if      (window.document.exitFullscreen)        window.document.exitFullscreen();
        else if (window.document.mozCancelFullScreen)   window.document.mozCancelFullScreen();
        else if (window.document.mozCancelFullscreen)   window.document.mozCancelFullScreen();
        else if (window.document.webkitExitFullscreen)  window.document.webkitExitFullscreen();
        else if (window.document.msExitFullscreen)      window.document.msExitFullscreen();
        break;
    }
    var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;
    if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {
      var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};
      iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");
    }
  };
  if (window.addEventListener) {
    window.addEventListener("message", handleIFrameMessage, false);
  } else if (window.attachEvent) {
    window.attachEvent("onmessage", handleIFrameMessage);
  }
  </script>

var ifr=document.getElementById（“JotFormIFrame-81003857231348”）；
if（window.location.href&&window.location.href.indexOf（“？”>-1）{
var get=window.location.href.substr（window.location.href.indexOf（“？”）+1）；
如果（ifr&&get.length>0）{
var src=ifr.src；
src=src.indexOf（“？”>-1？src+”&“+get:src+”？“+get；
ifr.src=src；
}
}
window.handleIFrameMessage=函数（e）{
var args=e.data.split（“：”）；
if（args.length>2）{iframe=document.getElementById（“JotFormIFrame-”+args[（args.length-1）]；}else{iframe=document.getElementById（“JotFormIFrame”）；}
if（！iframe）{return；}
开关（参数[0]）{
案例“scrollIntoView”：
iframe.scrollIntoView（）；
打破
案例“设置高度”：
iframe.style.height=args[1]+“px”；
打破
案例“collapseErrorPage”：
if（iframe.clientHeight>window.innerHeight）{
iframe.style.height=window.innerHeight+“px”；
}
打破
案例“重新加载页面”：
window.location.reload（）；
打破
案例“loadScript”：
var src=args[1]；
如果（参数长度>3）{
src=args[1]+'：'+args[2]；
}
var script=document.createElement（'script'）；
script.src=src；
script.type='text/javascript'；
document.body.appendChild（脚本）；
打破
案例“exitFullscreen”：
if（window.document.exitFullscreen）window.document.exitFullscreen（）；
else if（window.document.mozCancelFullScreen）window.document.mozCancelFullScreen（）；
else if（window.document.mozCancelFullscreen）window.document.mozCancelFullscreen（）；
else if（window.document.webkitExitFullscreen）window.document.webkitExitFullscreen（）；
else if（window.document.msExitFullscreen）window.document.msExitFullscreen（）；
打破
}
var isJotForm=（e.origin.indexOf（“jotform”）>-1）？真：假；
if（iframe中的isJotForm&&“contentWindow”和iframe.contentWindow中的“postMessage”）{
var URL={“docurl”：encodeURIComponent（document.URL），“referer”：encodeURIComponent（document.referer）}；
iframe.contentWindow.postMessage（JSON.stringify（{“type”：“url”，“value”：url}），“*”；
}
};
if（window.addEventListener）{
addEventListener（“消息”，HandleFrameMessage，false）；
}else if（窗口附件）{
attachEvent（“onmessage”，HandleFrameMessage）；
}

我尝试使用脚本创建一个新的js文件，并将其加载到react组件中，但它无法工作，并出现以下错误：

第14行：未定义“iframe”
第14行：未定义“iframe”
第15行：未定义“iframe”
第18行：未定义“iframe”
第21行：未定义“iframe”
第24行：未定义“iframe”
第25行：未定义“iframe”
第50行：未定义“iframe”
第50行：未定义“iframe”
第52行：未定义“iframe”
第56行：“HandleFrameMessage”未定义
第58行：“HandleFrameMessage”未定义

从“React”导入React；
导出默认类ScriptServices扩展React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
const s=document.createElement（'script'）；
s、 类型='text/javascript'；
s、 异步=真；
s、 src=“./scriptServices.js”；
此.instance.appendChild；
}  
render（）{
返回(
)
}
}

---

我只是想将jotform添加到我用react构建的web应用程序中，但我无法让它工作…

我制作了一个组件，可以轻松地将jotform.com表单嵌入到基于react的网站或应用程序中。它支持NextJS/Gatsby-like SSR框架

如果需要，您还可以访问一些回调，如onSubmit

您可以在此处访问它：

示例用法：

import JotFormReact 'jotform-react';

const YourApp = () => {
    return (<div>
      ...Your App...
      <JotFormReact
        formURL="https://form.jotform.com/211272589254055"
      />
    </div>)
}

导入JotFormReact'JotFormReact'；
constyourapp=（）=>{
返回(
…你的应用程序。。。
)
}

此.instance来自何处？您的上一个错误是因为这一行：

window.addEventListener（“message”，handleIFrameMessage，false）声明时，您已经绑定到
窗口
。因此，要么删除
window.handleIFrameMessage=
并用普通函数声明替换它，要么删除脚本底部的
addEventListener
。
import JotFormReact 'jotform-react';

const YourApp = () => {
    return (<div>
      ...Your App...
      <JotFormReact
        formURL="https://form.jotform.com/211272589254055"
      />
    </div>)
}