HTML srcdoc Attribute

Description

The srcdoc attribute is a feature associated with the <iframe> HTML element, enabling web developers to specify the HTML content of the iframe directly inline within the attribute, rather than referencing an external resource through the src attribute. This capability allows for embedding small snippets of HTML directly into a parent page without the need for creating separate pages or documents.

The srcdoc attribute can be particularly useful for displaying code examples, embedding small applications or widgets, and constructing complex web page layouts without additional HTTP requests to load external content. When the srcdoc attribute is used, the browser will render the HTML content specified within it inside the iframe, effectively treating it as the source of the iframe.

It's important to note that the content of the srcdoc attribute needs to be properly escaped, as it is placed within a string in the HTML attribute. Furthermore, for security reasons, the same-origin policy applies to content loaded via the srcdoc attribute, similar to content loaded through the src attribute. This means that the embedded content is treated as being from the same origin as the parent document, unless otherwise specified through sandboxing or similar mechanisms.

In the context of browser support, the srcdoc attribute is widely supported in modern web browsers, making it a reliable tool for developers looking to embed HTML content directly within an iframe. However, it's advisable to provide a fallback mechanism using the src attribute for browsers that do not support the srcdoc attribute, ensuring that the content can still be accessed by users on older browsers.

Syntax

<iframe srcdoc="HTML-code" />

Values

  • HTML-codeValid HTML code to be displayed inside the iframe element.

Applies To

The srcdoc attribute can be used on the following html elements.

Example

  <iframe srcdoc="
<h1>This is the content displayed in the iframe</h1>
<p>It's directly embedded in the HTML.</p>
">
</iframe>

Browser Support

The following table will show you the current browser support for the HTML srcdoc Attribute.

Desktop
Edge Chrome Firefox Opera Safari
792025156
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
2525??1.537

Last updated by CSSPortal on: 29th March 2024