javascript - How do I use iframe-resizer with a React JS Page As Content? - Stack Overflow

admin管理员组

文章数量:1305431

I have a host webpage with an iframe. I also have a child page, to embed in the host's iframe, that is a React application. I want the height of the iframe to be adjusted automatically as the child page changes.

I'm trying to use iframe-resizer to resize the parent iframe. I know I need to include iframeResizer.contentWindow.min.js in the child page (my react application). I don't know where in my child React project I need to set certain parameters/call functions and where I should import this JS file.

I've tried following the instructions here and on certain tutorials online:

But it's always just how to implement it on the host page.

I already included the script in the host page:

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

How do I correctly include the iFrameResizer.ContentWindow in my child/embedded React project?

I have a host webpage with an iframe. I also have a child page, to embed in the host's iframe, that is a React application. I want the height of the iframe to be adjusted automatically as the child page changes.

I'm trying to use iframe-resizer to resize the parent iframe. I know I need to include iframeResizer.contentWindow.min.js in the child page (my react application). I don't know where in my child React project I need to set certain parameters/call functions and where I should import this JS file.

I've tried following the instructions here and on certain tutorials online: https://github./davidjbradshaw/iframe-resizer

But it's always just how to implement it on the host page.

I already included the script in the host page:

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

How do I correctly include the iFrameResizer.ContentWindow in my child/embedded React project?

• javascript
• reactjs
• iframe
• iframe-resizer

Share Improve this question Follow edited Aug 31, 2022 at 20:23 Robert P 16k1111 gold badges7373 silver badges117117 bronze badges asked Apr 17, 2019 at 8:45 user11125394user11125394 3711 gold badge11 silver badge66 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

For a parent react page, I have just put together an official react wrapper for iframe-Resizer that supports its full API.

https://iframe-resizer./react

For a child react app, it must import and bundle iframeResizer.ContentWindow from the react-resizer package.

To do this, first add react-resizer to your client app's packages.

npm i react-resizer

Then, in the root ponent of your app, import the code for the ContentWindow. So for example, if App.jsx is the root ponent in your app, modify it like the following:

// App.jsx

import React from "react";
// ... other imports
import "iframe-resizer/js/iframeResizer.contentWindow"; // add this
   
export default function App() { ... }

This will bundle the iframeResizer.contentWindow code with your app.

Even I tried using iframe-resizer but there is always some scenario where it fails. So I wrote my own javascript to resize iframe and it works fine and there is no dependency on third party library.

  // region react lifecycle methods
  ponentWillMount () {
    // 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)
    }
  }

  ponentWillUnmount () {
    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

Here setIframeHeight is the main method to resize iframe. Rest is supporting code. You can use refer to that if you want. Note:- Here message is events from iframe.

本文标签： javascriptHow do I use iframeresizer with a React JS Page As ContentStack Overflow