<iframe> HTML inline frame element

Try it

<iframe
  id="inlineFrameExample"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&amp;layer=mapnik">
</iframe>

iframe {
  border: 1px solid black;
  width: 100%; /* takes precedence over the width set with the HTML width attribute */
}

Each embedded browsing context has its own document and allows URL navigations. The navigations of each embedded browsing context are linearized into the session history of the topmost browsing context. The browsing context that embeds the others is called the parent browsing context. The topmost browsing context — the one with no parent — is usually the browser window, represented by the Window object.

Attributes

This element includes the global attributes.

allow

Specifies a Permissions Policy for the <iframe>. The policy defines what features are available to the <iframe> (for example, access to the microphone, camera, battery, web-share, etc.) based on the origin of the request.

See iframes in the Permissions-Policy topic for examples.

Note: A Permissions Policy specified by the allow attribute implements a further restriction on top of the policy specified in the Permissions-Policy header. It doesn't replace it.

allowfullscreen

Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method.

Note: This attribute is considered a legacy attribute and redefined as allow="fullscreen *".

allowpaymentrequest

Set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API.

Note: This attribute is considered a legacy attribute and redefined as allow="payment *".

browsingtopics

A boolean attribute that, if present, specifies that the selected topics for the current user should be sent with the request for the <iframe>'s source.

credentialless

Set to true to make the <iframe> credentialless, meaning that its content will be loaded in a new, ephemeral context. It doesn't have access to the network, cookies, and storage data associated with its origin. It uses a new context local to the top-level document lifetime. In return, the Cross-Origin-Embedder-Policy (COEP) embedding rules can be lifted, so documents with COEP set can embed third-party documents that do not. See IFrame credentialless for more details.

csp

A Content Security Policy enforced for the embedded resource. See HTMLIFrameElement.csp for details.

height

The height of the frame in CSS pixels. Default is 150.

loading

Indicates when the browser should load the iframe:

eager

Load the iframe immediately on page load (this is the default value).

lazy

Defer loading of the iframe until it reaches a calculated distance from the visual viewport, as defined by the browser. The intent is to avoid using the network and storage bandwidth required to fetch the frame until the browser is reasonably certain that it will be needed. This improves the performance and cost in most typical use cases, in particular by reducing initial page load times.

Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure, because if a user agent supported lazy loading when scripting is disabled, it would still be possible for a site to track a user's approximate scroll position throughout a session, by strategically placing iframes in a page's markup such that a server can track how many iframes are requested and when.

name

A targetable name for the embedded browsing context. This can be used in the target attribute of the <a>, <form>, or <base> elements; the formtarget attribute of the <input> or <button> elements; or the windowName parameter in the window.open() method. In addition, the name becomes a property of the Window and Document objects, containing a reference to the embedded window or the element itself.

privateToken

Contains a string representation of an options object representing a private state token operation; this object has the same structure as the RequestInit dictionary's privateToken property. IFrames containing this attribute can initiate operations such as issuing or redeeming tokens when their embedded content is loaded.

referrerpolicy

Indicates which referrer to send when fetching the frame's resource:

no-referrer

The Referer header will not be sent.

no-referrer-when-downgrade

The Referer header will not be sent to origins without TLS (HTTPS).

origin

The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.

origin-when-cross-origin

The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.

same-origin

A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.

strict-origin

Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).

strict-origin-when-cross-origin (default)

Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).

unsafe-url

The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.

sandbox

Controls the restrictions applied to the content embedded in the <iframe>. The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions:

allow-downloads

Allows downloading files through an <a> or <area> element with the download attribute, as well as through the navigation that leads to a download of a file. This works regardless of whether the user clicked on the link, or JS code initiated it without user interaction.

allow-forms

Allows the page to submit forms. If this keyword is not used, a form will be displayed as normal, but submitting it will not trigger input validation, send data to a web server, or close a dialog.

allow-modals

Allows the page to open modal windows by Window.alert(), Window.confirm(), Window.print() and Window.prompt(), while opening a <dialog> is allowed regardless of this keyword. It also allows the page to receive BeforeUnloadEvent event.

allow-orientation-lock