Использование iFrame Resizer с страницей React JS в качестве содержимого - PullRequest
Новая
       21

Использование iFrame Resizer с страницей React JS в качестве содержимого

0 голосов
/ 17 апреля 2019

У меня есть iFrame моей страницы React на внешней странице CMS, но я хочу, чтобы высота регулировалась автоматически.

Я пытаюсь использовать эту библиотеку: https://github.com/davidjbradshaw/iframe-resizer но, к сожалению, я не могу реализовать это правильно ... Я не знаю, если и где в моем проекте React мне нужно установить определенные параметры / функции вызова и куда я должен импортировать этот файл JS.

Я попробовал следовать инструкциям здесь и в некоторых онлайн-уроках: https://github.com/davidjbradshaw/iframe-resizer

Но всегда это просто, как реализовать это на странице хоста.

Я уже включил скрипт на странице хоста: 

<iframe id="my-iframe" src="https://myiframeurl.com" width="100%" frameBorder="0" scrolling="no"></iframe>
<script type="text/javascript" src="https://www.mycmsurl.com/IFrameResizer/Javascripts/iframeResizer.min.js">
</script>
<script type="text/javascript"> //<![CDATA[
jQuery('#my-iframe').iFrameResize({autoResize: true});
//]]></script>

Теперь, насколько я понимаю, мне нужно вызвать iFrameResizerContentWindow где-нибудь в моем проекте React из того, что я прочитал в документации, но я не совсем уверен, что было бы правильным способом сделать это, и теперь документы сбивают меня с толку немного. Так что, если кто-нибудь сможет мне помочь, это будет высоко оценено!

1 Ответ

0 голосов
/ 17 апреля 2019

Даже я пытался использовать iframe-resizer, но всегда есть сценарий, когда он терпит неудачу. Поэтому я написал свой собственный javascript для изменения размера iframe, и он работает нормально, и не зависит от сторонней библиотеки. 

  // region react lifecycle methods
  componentWillMount () {
    // Detect whether device supports orientationchange event, otherwise fall back to the resize event
    let supportsOrientationChange = 'onorientationchange' in window
    let orientationEvent = supportsOrientationChange ? 'orientationchange' : 'resize'
    if (window.addEventListener) {
      window.addEventListener('message', this.checkSender)
      window.addEventListener(orientationEvent, this.setIframeHeight)
    } else if (window.attachEvent) {
      window.attachEvent('message', this.checkSender)
      window.attachEvent(orientationEvent, this.setIframeHeight)
    }
  }

  componentWillUnmount () {
    window.removeEventListener('message', this.checkSender)
    let supportsOrientationChange = 'onorientationchange' in window
    let orientationEvent = supportsOrientationChange ? 'orientationchange' : 'resize'
    window.removeEventListener(orientationEvent, this.setIframeHeight)
  }
  // endregion

  // region custom methods.
  setIframeHeight = () => {
    try {
      let iframe = document.getElementById(iframeId)
      if (iframe) {
        let iframeWin = iframe.contentDocument || iframe.contentWindow
        if (iframeWin && iframeWin.getElementById('root')) {
          iframe.style.height = iframeWin.getElementById('root').offsetHeight + 'px'
        }
      }
    } catch (e) {
      console.error('Resizing method call', e)
    }
  }

  checkSender = (e) => {
    e.preventDefault()
    // error added or removed in iframe
    if (e.data.msg === 'validationChanged') {
      this.setIframeHeight()
    }
  }
  // end region

Здесь setIframeHeight является основным методом изменения размера iframe. Остальное - это код поддержки. Вы можете использовать ссылку на это, если хотите. Примечание: - Здесь сообщение о событиях из iframe.

...