@ampproject/amp-iframe
Advanced tools
Displays an iframe.
Use Bento Iframe as a web component <bento-iframe>, or a Preact/React functional component <BentoIframe>.
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.
The examples below demonstrate use of the <bento-iframe> web component.
[example preview="top-frame" playground="false"]
Install via npm:
npm install @ampproject/bento-iframe
import '@ampproject/bento-iframe';
[/example]
<script>[example preview="top-frame" playground="false"]
<head>
<script async custom-element="bento-iframe" 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">
<style data-bento-boilerplate>
bento-iframe {
display: block;
overflow: hidden;
position: relative;
}
</style>
</head>
<bento-iframe
id="my-iframe"
src="https://en.wikipedia.org/wiki/Bento"
width="800"
height="600">
</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>
[/example]
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 data-bento-boilerplate>
bento-iframe {
display: block;
overflow: hidden;
position: relative;
}
</style>
srcThe URL of the page to embed.
srcdocInline HTML to embed. Only one of src or srcdoc is required. If both are specified, srcdoc overrides src.
heightHeight of the iframe in pixels. Note: this is applied to the parent container and the iframe element is set to 100% height.
widthWidth 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.
You may use the bento-iframe element selector to style the component.
The examples below demonstrates use of the <BentoIframe> as a functional component usable with the Preact or React libraries.
[example preview="top-frame" playground="false"]
Install via npm:
npm install @ampproject/bento-iframe
import React from 'react';
import { BentoIframe } from '@ampproject/bento-iframe/react';
import '@ampproject/bento-iframe/styles.css';
function App() {
return (
<BentoIframe
src="https://en.wikipedia.org/wiki/Bento"
width="800"
height="600"
/>
);
}
[/example]
srcThe URL of the page to embed.
srcdocInline 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.
heightHeight of the iframe in pixels. Note: this is applied to the parent container and the iframe element is set to 100% height.
widthWidth of the iframe in pixels. Note: this is applied to the parent container and the iframe element is set to 100% width.
FAQs
AMP HTML amp-iframe Component
The npm package @ampproject/amp-iframe receives a total of 0 weekly downloads. As such, @ampproject/amp-iframe popularity was classified as not popular.
We found that @ampproject/amp-iframe demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 16 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.