<iframe> tag is used to embed other pages inside a web page.
<iframe> tag generates a specified area in which to embed other web pages. It is a container element that displays the inner child elements if the browser does not support ``
<iframe src="https://www.example.com" width="100%" height="500" frameborder="0" allowfullscreen sandbox > <p><a href="https://www.example.com">Click to open embedded page</a></p> </iframe>
The above code embeds
https://www.example.com in the current page, the display area is
100% in width and
500 pixels in height. If the current browser does not support
<iframe>, a link will be displayed for the user to click.
Browsers generally support
<iframe>, so the internal child elements can be left out.
The attributes of
<iframe> are as follows.
frameborder: whether to draw the border or not,
0is not drawn,
1is drawn (default value). It is recommended to use this property sparingly and set the style in the CSS instead.
src: the URL of the embedded page.
width: the width of the display area.
height: the height of the display area.
sandbox: set the permissions of the embedded page, see below.
importance: the priority of the browser to download the embedded web page, you can set three values.
highmeans high priority,
lowmeans low priority,
automeans it is up to the browser to decide.
name: the name of the embedded window, which can be used for the
referrerpolicy: the setting of the
Referererfield of the HTTP request when requesting an embedded page. See the
<a>tag for an introduction.
The embedded page has normal permissions by default, such as executing scripts, submitting forms, popups, etc. If the embedded page is a page from another site, you don't know what actions the other person will perform, so there is a security risk. To limit the risk of
<iframe>, HTML provides the
sandbox attribute, which allows you to set the permissions of the embedded page, which is equivalent to providing an isolation layer, i.e. a
sandbox can be used as a boolean attribute to turn on all restrictions.
<iframe src="https://www.example.com" sandbox> </iframe>
sandbox attribute can be set to a specific value, indicating that restrictions are turned on item by item. Not setting an item means that the permission is not available.
allow-forms: allows form submissions.
window.alert()to be executed.
allow-popups: allow embedded pages to pop up windows using the
allow-popups-to-escape-sandbox: allows popups to be sandbox-independent.
allow-orientation-lock: allow embedded pages to lock the orientation of the screen with a script, i.e. landscape or portrait.
allow-pointer-lock: allow embedded pages to use the Pointer Lock API to lock the mouse movement.
allow-presentation: allow embedded pages to use the Presentation API.
allow-same-origin: leave this restriction on, it will make all loaded pages considered cross-domain.
allow-scripts: allow embedded pages to run scripts (but not create popups).
sandboxproperty with both this value and
allow-same-originset will allow third-party pages embedded in
<iframe>to be accessed via user-initiated
document. requestStorageAccess()request to access the parent window's cookies via the Storage Access API.
allow-top-navigation: allow the embedded page to navigate to the top-level window.
allow-top-navigation-by-user-activation: allow the embedded web page to navigate to the top-level window, but it must be activated by the user.
allow-downloads-without-user-activation: allow the embedded web page to start downloading without user activation.
Note, do not set both the
allow-same-origin attributes, which will allow the embedded web page to change or remove the
The page specified by
<iframe> will load immediately, which is sometimes not the desired behavior.
<iframe> is loaded after scrolling into the viewport, which is more bandwidth-efficient.
loading attribute triggers lazy loading of the
<iframe> page. This attribute can take the following three values.
auto: the default behavior of the browser, which has the same effect as not using the
lazy: the lazy loading of
<iframe>, which will start loading when scrolling into the viewport.
eager: immediate loading of the resource, regardless of its position on the page.
<iframe src="https://example.com" loading="lazy"></iframe
The above code will enable lazy loading of
One thing to note is that if
<iframe> is hidden, the
loading attribute is invalid and will be loaded immediately. Chrome will consider
<iframe> to be hidden if any of the following conditions are met.
- The width and height of
<iframe>is 4 pixels or less.
- The style is set to
- Use positioning coordinates of negative
Yto place `<iframe`` off-screen. Translated with www.DeepL.com/Translator (free version)