Есть ли способ добавить iframe, созданный с помощью jotform, в компонент 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>
Я попытался создать новый файл js только с помощью сценария и загрузить его в компонент реакции, но он не работает и дает следующие ошибки:
Line 14: 'iframe' is not defined
Line 14: 'iframe' is not defined
Line 15: 'iframe' is not defined
Line 18: 'iframe' is not defined
Line 21: 'iframe' is not defined
Line 24: 'iframe' is not defined
Line 25: 'iframe' is not defined
Line 50: 'iframe' is not defined
Line 50: 'iframe' is not defined
Line 52: 'iframe' is not defined
Line 56: 'handleIFrameMessage' is not defined
Line 58: 'handleIFrameMessage' is not defined
import React from 'react';
export default class ScriptServices extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
const s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = "./scriptServices.js";
this.instance.appendChild(s);
}
render() {
return (
<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>
)
}
}
Я просто хочу добавить jotform в свое веб-приложение, созданное с помощью реакции, но я не могу заставить его работать ...
Ваша последняя ошибка возникла из-за этой строки: window.addEventListener("message", handleIFrameMessage, false); Вы уже связываетесь с window, когда он объявлен. Поэтому либо удалите window.handleIFrameMessage = и замените его обычным объявлением функции, либо удалите addEventListener в нижней части скрипта.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я сделал компонент, чтобы легко встраивать формы JotForm.com в ваши веб-сайты или приложения на основе ReactJS. Он поддерживает NextJS / Gatsby как фреймворки SSR.
У вас также есть доступ к некоторым обратным вызовам, таким как onSubmit, если вам нужно.
Вы можете получить к нему доступ здесь: https://npmjs.com/package/jotform-react
Пример использования:
import JotFormReact 'jotform-react';
const YourApp = () => {
return (<div>
...Your App...
<JotFormReact
formURL = "https://form.jotform.com/211272589254055"
/>
</div>)
}
Откуда взялся
this.instance?