@bentoproject/iframe

1.2305051745.1 • Public • Published

Bento Iframe

Renders an iframe that reports its position in the host document to the child window. It also allows the embedded document to resize it.

  1. Allows dynamic resizing when the component is outside to the viewport. This is to avoid content shifts.

  2. Can be set up so that the child window receives IntersectionObserver style change records of the iframe's intersection with the parent viewport.

Web Component

You must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See Layout and style.

Import via npm

npm install @bentoproject/iframe
import {defineElement as defineBentoIframe} from '@bentoproject/iframe';
defineBentoIframe();

Include via <script>

<script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-iframe-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-iframe-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-iframe-1.0.css" crossorigin="anonymous">

Example

<!DOCTYPE html>
<html>
  <head>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/bento.mjs"
    ></script>
    <script nomodule src="https://cdn.ampproject.org/bento.js"></script>
    <script
      type="module"
      async
      src="https://cdn.ampproject.org/v0/bento-iframe-1.0.mjs"
    ></script>
    <script
      nomodule
      async
      src="https://cdn.ampproject.org/v0/bento-iframe-1.0.js"
    ></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.ampproject.org/v0/bento-iframe-1.0.css"
    />
  </head>
  <body>
    <bento-iframe
      id="my-iframe"
      src="https://en.wikipedia.org/wiki/Bento"
      style="width: 800px; height: 600px"
    >
    </bento-iframe>

    <button id="change-source">Change source</button>

    <script>
      (async () => {
        const iframeEl = document.querySelector('#my-iframe');
        await customElements.whenDefined('bento-iframe');

        // Reload iframe with new src
        document.querySelector('#change-source').onclick = () => {
          iframeEl.setAttribute('src', 'https://example.com');
        };
      })();
    </script>
  </body>
</html>

Layout and style

Each Bento component has a small CSS library you must include to guarantee proper loading without content shifts. Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.

<link
  rel="stylesheet"
  type="text/css"
  href="https://cdn.ampproject.org/v0/bento-iframe-1.0.css"
/>

Alternatively, you may also make the light-weight pre-upgrade styles available inline:

<style>
  bento-iframe {
    display: block;
    overflow: hidden;
    position: relative;
  }
</style>

Attributes

src

The URL of the page to embed.

srcdoc

Inline HTML to embed. Only one of src or srcdoc is required. If both are specified, srcdoc overrides src.

height

Height of the iframe in pixels. Note: this is applied to the parent container and the iframe element is set to 100% height.

width

Width of the iframe in pixels. Note: this is applied to the parent container and the iframe element is set to 100% width.

allowfullscreen, allowpaymentrequest, and referrerpolicy (optional)

These attributes should all behave like they do on standard iframes.

sandbox (optional)

Iframes created by bento-iframe always have the sandbox attribute defined on them. By default, the value is empty, which means that they are "maximum sandboxed". By setting sandbox values, one can opt the iframe into being less sandboxed. All values supported by browsers are allowed. For example, setting sandbox="allow-scripts" allows the iframe to run JavaScript, or sandbox="allow-scripts allow-same-origin" allows the iframe to run JavaScript, make non-CORS XHRs, and read/write cookies.

If you are iframing a document that was not specifically created with sandboxing in mind, you will most likely need to add allow-scripts allow-same-origin to the sandbox attribute and you might need to allow additional capabilities.

Note also, that the sandbox applies to all windows opened from a sandboxed iframe. This includes new windows created by a link with target=_blank (add allow-popups to allow this to happen). Adding allow-popups-to-escape-sandbox to the sandbox attribute, makes those new windows behave like non-sandboxed new windows. This is likely most of the time what you want and expect.

See the docs on MDN for further details on the sandbox attribute.

Styling

You may use the bento-iframe element selector to style the component.


Preact/React Component

Import via npm

npm install @bentoproject/iframe
import React from 'react';
import {BentoIframe} from '@bentoproject/iframe/react';
import '@bentoproject/iframe/styles.css';

function App() {
  return (
    <BentoIframe
      src="https://en.wikipedia.org/wiki/Bento"
      width="800"
      height="600"
    />
  );
}

Props

src

The URL of the page to embed.

srcdoc

Inline HTML to embed. Only one of src or srcdoc is required. If both are specified, srcdoc overrides src.

allowFullScreen, allowPaymentRequest, and referrerPolicy (optional)

These attributes all behave like they do on standard iframes.

sandbox (optional)

Iframes created by <BentoIframe> always have the sandbox attribute defined on them. By default, the value is empty, which means that they are "maximum sandboxed". By setting sandbox values, one can opt the iframe into being less sandboxed. All values supported by browsers are allowed. For example, setting sandbox="allow-scripts" allows the iframe to run JavaScript, or sandbox="allow-scripts allow-same-origin" allows the iframe to run JavaScript, make non-CORS XHRs, and read/write cookies.

See the docs on MDN for further details on the sandbox attribute.

iframeStyle (optional)

Styles to apply to the iframe element, specified as JSON.

height

Height of the iframe in pixels. Note: this is applied to the parent container and the iframe element is set to 100% height.

width

Width of the iframe in pixels. Note: this is applied to the parent container and the iframe element is set to 100% width.

Readme

Keywords

none

Package Sidebar

Install

npm i @bentoproject/iframe

Weekly Downloads

3

Version

1.2305051745.1

License

Apache-2.0

Unpacked Size

1.06 MB

Total Files

29

Last publish

Collaborators

  • bentoprojectbot
  • kristoferbaxter
  • esth