zeroasterisk / react-iframe-resizer-super Goto Github PK

View Code? Open in Web Editor NEW

50.0 4.0 20.0 246 KB

inject HTML into an iframe, and/or resize an iframe to the height of it's contents

Home Page: https://zeroasterisk.github.io/react-iframe-resizer-super

License: MIT License

JavaScript 88.41% Shell 11.59%

react-iframe-resizer-super's Introduction

React Iframe Resizer With Super-Powers (cross domain, resize, etc)

This is a versatile React Component which renders an iframe and wires in the excellent Iframe Resizer library.

This Component was created with the React CDK by the great folks at Kadira.

NOTE: Renamed to react-iframe-resizer-super because there is already a react-iframe-resier npm package.

Installation

npm install --save react-iframe-resizer-super iframe-resizer

Usage

import ReactIframeResizer from 'react-iframe-resizer-super';


const iframeResizerOptions = { checkOrigin: false };

const MyComponent = props => (
  <div>
    <p>Content Before Iframe (style unaffected by iframe)</p>
    <ReactIframeResizer iframeResizerOptions={iframeResizerOptions}>
      <style>p { color: green; }</style>
      <p>Here is some green text, inside an iframe</p>
    </ReactIframeResizer>
    <p>Content After Iframe (style unaffected by iframe)</p>
  </div>
);

Props supported

content (string) iframe document option 1. - content of HTML to load in the iframe
src (string) iframe document option 2. - src to a URL to load in the iframe
iframeResizerEnable (bool) [true]
iframeResizerOptions (object) see all supported iframe-resizer options.
iframeResizerUrl (string || bool) URL to the client JS for injecting into the iframe. This only works for content type, at the moment. The default URL is https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.8/iframeResizer.contentWindow.min.js. If you wanted to disable this, you could set it to {false}
frameBorder (number) [0] optionally set a frameBorder
id (string) optionally set an id property
className (string) optionally set a className property
style (object) optionally set a style property default { width: '100%', minHeight: 20 }

Examples

See our stories/demos at zeroasterisk.github.io/react-iframe-resizer-super and the source of the stories/demo. and of course, more about iframe-resizer which is where most of the iframe magic happens.

Acknowledgements

Iframe Resizer library is excellent and deals well with crappy browsers. (caution: do not try to roll your own)
React CDK makes react Components easy to create, document, test, and share.

react-iframe-resizer-super's People

Contributors

Stargazers

Watchers

Forkers

francoslab stanley288 pedrofolim alexbaumgertner ninjacarr rsoury ubnt-marc-khouri khangiskhan tmcapplications lzdyd ambrous chrisgrabinski groupsky shaoxi2093 nikolay992 jeronimonunez makairaio maerzhase googleglass1

react-iframe-resizer-super's Issues

warning:[iFrameSizer][Host page: iFrameResizer1] Ignored iFrame, already setup.

Callbacks

Just wondering if any of the iframe-resizer callbacks work. I can't seem to get init, message, resized to work when passed in as iframeResizerOptions. I've also tried setting a React ref on the ReactIframeResizer component to inject the readyCallback and that's not working either. Any tips?

"react-iframe-resizer-super": "0.2.2",
"react": "16.6.3",

// Attempt to inject ready callback
  componentDidMount() {
    window.addEventListener('message', this.receiveMsg);
    // this.iframeRef.current. => console.log('ready callback .. ');
    debugger;
    if (this.iframeRef && this.iframeRef.current) {
      this.iframeRef.current.refs.frame.iFrameResizer = {
        readyCallback: () => console.log('ready callback .. '),
      };
    }
  }
...
    const opts = {
      checkOrigin: false,
      log: true,
      iframeResizerEnable: true,
      initCallback: (iframe) => console.log(iframe),
      readyCallback: (iframe) => console.log(iframe),
      resizedCallback: () => console.log('hello'),
      messageCallback: () => console.log('hello'),
      scrolling: true, // Payoda has min-height/widths so we'll need to scroll in some cases.
      warningTimeout: 0,
    };

    <Fragment>
        {this.state.isLoading &&
          <div className='floating-loader'>
            <LoadingIndicator large={true} loadingText={`Loading ${sectionAttrs.name}...`} />
          </div>
        }
        <ReactIframeResizer
          ref={this.iframeRef}
          id={sectionAttrs.id}
          src={src}
          iframeResizerOptions={opts}
          style={{
            height: '100%',
            width: '100%',
          }}
        />
      </Fragment>

If I enable logging I can see messages in the console, but that's about it.

Doesn't work with version 4 of iframe-resizer

iframe-resizer has been on version 4 for three weeks now:

https://github.com/davidjbradshaw/iframe-resizer/releases

If you try to use the latest version of both packages, yarn check is not happy:

error "react-iframe-resizer-super#iframe-resizer@^3.6.2" doesn't satisfy found match of "[email protected]"

Sometimes (content) iframe won't resize

In my situation everything works fine from first glance, however sometimes iframe won't resize, then after clicking it will resize again.

I'm using "iframe-resizer": "^3.6.1" and "react-iframe-resizer-super": "^0.2.0"

My code for iframe is (I'm using content-based iframe)

<IframeResizer
    src={null}
    content={activeMessage.htmlEdited}
    iframeResizerOptions={{checkOrigin: false, resizeFrom: 'parent', heightCalculationMethod: 'max'}}
    iframeResizerEnable={true}
    iframeResizerUrl="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.8/iframeResizer.contentWindow.min.js">
</IframeResizer>

I am adding a small (20s) video for the demonstration:
Watch video demonstration here

Do you think there is a quick fix to this? Or anything I can do about this?
Thanks in advance!

Deps change

Hey, (Thanks for the library)

I'm running into some weird issues, because i'm consuming this module via JSPM, but it looks like this package has a couple of dep changes that could be made and would still be valid for everyone.

Proptypes should probably be a real dependency as it doesn't actually get shaken out.
https://github.com/facebook/prop-types#how-to-depend-on-this-package
Though this feels a bit weird when React is a peer dependency anyway 😄.
The peer dep on react could be upstreamed to include the 16.x range. (As it totally works on react@^16.4.0 as well 😃.

Unable to render an html string by passing 'content'

Hello,

We've been using this library for a few months, and recently we had a requirement to update the html from iFrame we use to pass it a dynamic string, which means we can no longer use a static html file. I've tried replacing src by content like so:

<ReactIframeResizer iframeResizerOptions={iframeResizerOptions} content={string} />

Where string is:

const text = `<html>
  <head>
    <link rel="stylesheet" title="main" type="text/css" href="teststyle.css" media="screen" />
    <script id="RestoNGo-script" src="testapp.js" data-api-key="apiKey" data-culture="en-CA"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />	    
  </head>
  <body>
    <div id="Test-App"></div>
  </body>
</html>`;

This does not work, as the iFrame no longer displays anything. Does anyone have a clue to what could be going on?

Iframe not resizing

This is the current snippet, I pass url as props to this class which uses reactiframeresizer to construct the new iframe.
import React from 'react';
import ReactIframeResizer from 'react-iframe-resizer-super';

export default class WidgetFrame extends React.Component {

constructor(props) {
    super(props);
}

render() {
    return (
    <ReactIframeResizer src={this.props.url} iframeResizerEnable ={true}  />
    )
}

}

However, the iframe that is being rendered doesn't resize. My guess is, the content loads after the iframeresizer frame has been constructed which causes it to render at a fixed height.
If this is the reason, what is the remedy for it? If no, suggestions are welcome as well.

Also, I'm being bombarded with the following errors and warnings. Though it doesn't hurt the functionality, but it surely spoils the presentation aspect of the component.

I'll be glad if someone could post a solution for this as well :)

WebpackError: TypeError: el.addEventListener is not a function

Receiving this error when performing a build. Any help would be great.

error Building static HTML failed

  77 |
  78 |   function addEventListener(el, evt, func) {
> 79 |     el.addEventListener(evt, func, false)
     | ^
  80 |   }
  81 |
  82 |   function removeEventListener(el, evt, func) {


  WebpackError: TypeError: el.addEventListener is not a function

  - iframeResizer.js:79 addEventListener
    [lib]/[iframe-resizer]/js/iframeResizer.js:79:1

  - iframeResizer.js:1259 setupEventListeners
    [lib]/[iframe-resizer]/js/iframeResizer.js:1259:1

  - iframeResizer.js:1300 Object.factory
    [lib]/[iframe-resizer]/js/iframeResizer.js:1300:1

  - iframeResizer.js:1349
    [lib]/[iframe-resizer]/js/iframeResizer.js:1349:23

  - iframeResizer.js:1355 Object../node_modules/iframe-resizer/js/iframeResizer.
    js
    [lib]/[iframe-resizer]/js/iframeResizer.js:1355:2

  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1

  - index.js:1 Object../node_modules/iframe-resizer/js/index.js
    [lib]/[iframe-resizer]/js/index.js:1:22

  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1

  - index.js:3 Object../node_modules/iframe-resizer/index.js
    [lib]/[iframe-resizer]/index.js:3:18

  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1

  - index.js:39 Object../node_modules/react-iframe-resizer-super/dist/index.js
    [lib]/[react-iframe-resizer-super]/dist/index.js:39:22

  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1


  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1

  - index.js:1 Module../src/components/full-plan-summary/index.js
    lib/src/components/full-plan-summary/index.js:1:1

  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1

css not working inside iframe content

how can I apply CSS to the iframe contents? below is the example
https://codesandbox.io/s/frame-ih8ev?file=/src/App.js

iframeResizer.js:132 [iFrameSizer][Host page: some-id] Ignored iFrame, already setup.

I'm getting the following warning whenever I update state in my component.

 [iFrameSizer][Host page: some-id] Ignored iFrame, already setup.

To reproduce this you can just have something like:

import React, { Component } from 'react';
import ReactIframeResizer from 'react-iframe-resizer-super';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
    };
  }

  toggleModal = () => {
    this.setState(prevState => {
      showModal: !prevState.showModal
    }
  }

  render() {
    const iframeResizerOptions = {
      checkOrigin: false
    };
    return (
      <div className="App">
           <ReactIframeResizer
              src="something.html"
              iframeResizerOptions={iframeResizerOptions}
              iframeResizerUrl={false}
              iframeResizerEnable={true}
            />
            <SomeModalComponent show={this.state.showModal} />
            <button onClick={this.toggleModal}>Show Modal</button>
      </div>
    );
  }
}

export default App;

Any thoughts on how I can silence this warning, or is there a better way of using this?

How to implement this in a typical Linux/cPanel type of cheap hosting?

Appreciate a 5-year-old type of step-by-step sample.
Thanks

Can't pass special attributes to <iframe> tag

I need to add some special attributes to the iframe tag but I don't find the way. Those attributes are allowusermedia and allow="microphone *; camera *;"

Cross Origin Issue?

I'm receiving this error when using this component,

Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "https://myapp.herokuapp.com" from accessing a cross-origin frame.

I have tried setting setOrigin to false and also an array of URLs and still get this error when building.

Is this a bug or is it because I'm on different domains for the React app and iframe src?

Thanks!

React 17/18 Support

Hey, I was wondering if this component works with React 17/18 and if we could update the package.json to reflect that.