Package Exports

@trendmicro/react-iframe

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@trendmicro/react-iframe) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-iframe

React Iframe

Demo: https://trendmicro-frontend.github.io/react-iframe

Installation

Install the latest version of react and react-iframe:

npm install --save react @trendmicro/react-iframe

Install react-iframe` with @trendmicro scope:

import Iframe from '@trendmicro/react-iframe';

Usage

Fixed width and height

<Iframe src="index.html" width="100%" height={240} />

Resize iframe to fit content (same domain only)

If you want to avoid polling, use MutationObserver or iframe-resizer to detect the size of the iframe on content changes.

<Iframe
    ref={iframe => {
        if (this.resizableIframeTimer) {
            clearInterval(this.resizableIframeTimer);
            this.resizableIframeTimer = null;
        }
        
        if (!iframe) {
            return;
        }
        
        if (iframe.contentWindow) {
            let prevHeight = 0;
            this.resizableIframeTimer = setInterval(() => {
                const nextHeight = iframe.contentWindow.document.body.offsetHeight;
                if (prevHeight !== nextHeight) {
                    iframe.style.height = nextHeight + 'px';
                    prevHeight = nextHeight;
                }
            }, 200);
        }
    }}
    src="index.html"
    width="100%"
/>

API

Properties

Name	Type	Default	Description
src	string		The src attribute specifies the address of the document to embed in the iframe.
width	string or number	'100%'	The width attribute specifies the width of an iframe, in pixels.
height	string or number	'100%'	The height attribute specifies the height of an iframe, in pixels.
sandbox	boolean, object, or string		The sandbox attribute enables an extra set of restrictions for the content in the iframe.
sandbox.allowForms	boolean	true	Re-enables form submission.
sandbox.allowModals	boolean	true	Sandboxed frames will block modal dialogs by default.
sandbox.allowPointerLock	boolean	false	Re-enables APIs.
sandbox.allowPopups	boolean	true	Re-enables popups.
sandbox.allowSameOrigin	boolean	true	Allows the iframe content to be treated as being from the same origin.
sandbox.allowScripts	boolean	true	Re-enables scripts.
sandbox.allowTopNavigation	boolean	false	Allows the iframe content to navigate its top-level browsing context.

License

MIT