SEB Magic Iframe

SEB Magic Iframe adds auto resize and responsiveness to iframes as well as the ability to listen to events, override styles and show custom loaders when the iframe is loading content (requires that the content is loaded from the same domain). Built as generic web component with Stencil.

Demo and example

See live demo here: https://sebgroup.github.io/magic-iframe/

Usage

Depending on the framework you're using there are different ways this component can be loaded, the most common ones being:

• Script file from CDN
• Local script (downloaded with npm)
• Using import

Once the script is added you just use the <seb-magic-iframe> element tag like any other element (more info below).

With script tag

• Put these two script tags in the head of your index.html document:

<script type="module" src="https://unpkg.com/@sebgroup/magic-iframe/dist/magic-iframe/magic-iframe.esm.js"></script>
<script nomodule src="https://unpkg.com/@sebgroup/magic-iframe/dist/magic-iframe/magic-iframe.js"></script>

The first script will be used by modern browsers supporting modules, the second one is only needed if you need to support older browser like IE etc. that don't support loading modules. This will load the latest version of the component if you want to use a specific version just add @{version} to the package name in the url, e.g. https://unpkg.com/@sebgroup/[email protected]/dist/magic-iframe/magic-iframe.js to load version 1.0.0.

With npm

• Run npm install @sebgroup/magic-iframe --save
• Add the scripts from the node_modules folder to your index.html document (same as above), but instead of loading from unpkg you reference the same files now located in the node_modules folder e.g:

<script type="module" src="node_modules/@sebgroup/magic-iframe/dist/magic-iframe/magic-iframe.esm.js"></script>
<script nomodule src="node_modules/@sebgroup/magic-iframe/dist/magic-iframe/magic-iframe.js"></script>

In a stencil app

• Run npm install @sebgroup/magic-iframe --save
• Import package import @sebgroup/magic-iframe;

In template, JSX, html etc.

Once the script has been added you're free to use the element anywhere in your template, JSX, html etc. like this:

Basic

<seb-magic-iframe source="/foo/bar/index.html"></seb-magic-iframe>

With options as attributes

<seb-magic-iframe source="/foo/bar/index.html"
                  styles="body { background: white; }"
                  autoResize="false"
                  resizeDebounceMillis="50">
</seb-magic-iframe>

With custom loading indicator

<seb-magic-iframe source="/foo/bar/index.html">
  <div class="skeleton-loader"></div> <!-- replace with your own code -->
</seb-magic-iframe>

Options

For more options see component documentation.

Local development

To run this project locally, clone the repository (or make a fork):

git clone https://github.com/sebgroup/magic-iframe.git

Install dependencies and start app:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test