HTML

HTMLIFrameElement

HTMLIFrameElement <iframe>

The HTMLIFrameElement interface provides special properties and methods for manipulating the layout and presentation of inline frame elements. An inline frame is defined by the <iframe> element. To embed another document inside the current HTML document, use an inline frame.

Tip: Style the <iframe> with CSS .
Tip: Always add a title property for the <iframe> tag. Screen readers utilize this to read the contents of the <iframe>.

Attribute Value Description Example
allow Specifies a feature policy for the <iframe>
allowfullscreen true Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method
false
allowpaymentrequest true Set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API
false
height pixels Specifies the height of an <iframe>. Default height is 150 pixels <iframe src="/default.asp" width="200" height="200"> <iframe>
loading eager Specifies whether a browser should load an iframe immediately or to defer loading of iframes until some conditions are met
lazy
name text Specifies the name of an<iframe> <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <a href="https://www.w3schools.com" target="iframe_a">W3Schools.com
ping list_of_URLs Specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking. <a href="https://www.google.com/html" ping="https://www.google.com/trackpings"></a>
referrerpolicy no-referrer No referrer information will be sent along with a request <iframe src="https://w3schools.com/" referrerpolicy="no-referrer"></iframe>
no-referrer-when-downgrade Default. The referrer header will not be sent to origins without HTTPS
origin Send only scheme, host, and port to the request client
origin-when-cross-origin For cross-origin requests: Send only scheme, host, and port. For same-origin requests: Also include the path
same-origin For same-origin requests: Referrer info will be sent. For cross-origin requests: No referrer info will be sent
strict-origin Only send referrer info if the security level is the same (e.g. HTTPS to HTTPS). Do not send to a less secure destination (e.g. HTTPS to HTTP)
strict-origin-when-cross-origin Send full path when performing a same-origin request. Send only origin when the security level stays the same (e.g. HTTPS to HTTPS). Send no header to a less secure destination (HTTPS to HTTP)
unsafe-url Send origin, path and query string (but not fragment, password, or username). This value is considered unsafe
sandbox (no value) Applies all restrictions <iframe src="demo_iframe_sandbox.htm" sandbox></iframe>
allow-forms Allows form submission
allow-modals Allows to open modal windows
allow-orientation-lock Allows to lock the screen orientation
allow-pointer-lock Allows to use the Pointer Lock API
allow-popups Allows popups
allow-popups-to-escape-sandbox Allows popups to open new windows without inheriting the sandboxing
allow-presentation Allows to start a presentation session
allow-same-origin Allows the iframe content to be treated as being from the same origin
allow-scripts Allows to run scripts
allow-top-navigation Allows the iframe content to navigate its top-level browsing context
allow-top-navigation-by-user-activation Allows the iframe content to navigate its top-level browsing context, but only if initiated by user
src URL Specifies the URL of the document to embed in the iframe.
    Possible values:
  • An absolute URL - points to another web site (like src="http://www.example.com/default.htm")
  • A relative URL - points to a file within a web site (like src="default.htm")
<iframe src="/default.asp"></iframe><iframe src="/default.asp"></iframe>
srcdoc HTML_code The HTML content to show in the iframe. Must be valid HTML syntax <iframe srcdoc="<p>Hello world!</p>" src="demo_iframe_srcdoc.htm"></iframe>
width pixels Specifies the width of an <iframe >. Default width is 300 pixels.The width in pixels (like "100px" or just "100") <iframe src="/default.asp" width="200" height="200"></iframe>

Browser Compatibility

Element Chrome Edge Firefox Safari Opera
<iframe> Yes Yes Yes Yes Yes