Добавить iframe в компонент React

Есть ли способ добавить 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 в свое веб-приложение, созданное с помощью реакции, но я не могу заставить его работать ...

Откуда взялся this.instance?

Chase DeAnda 17.04.2018 19:49

Ваша последняя ошибка возникла из-за этой строки: window.addEventListener("message", handleIFrameMessage, false); Вы уже связываетесь с window, когда он объявлен. Поэтому либо удалите window.handleIFrameMessage = и замените его обычным объявлением функции, либо удалите addEventListener в нижней части скрипта.

Chase DeAnda 17.04.2018 19:52
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
1 136
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я сделал компонент, чтобы легко встраивать формы 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>)
}

Другие вопросы по теме