CODEWITHSUNDEEP
javascriptreactjsiframeiframe-resizer
user11125394
user11125394

Reputation: 37

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

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.com/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.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>

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

Upvotes: 3

Views: 10066

Answers (3)

David Bradshaw
David Bradshaw

Reputation: 13077

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.com/react

Upvotes: 4

Robert P
Robert P

Reputation: 15968

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 component of your app, import the code for the ContentWindow. So for example, if App.jsx is the root component 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.

Upvotes: 2

tarzen chugh
tarzen chugh

Reputation: 11247

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
  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

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.

Upvotes: 0

Related Questions