HTML srcdoc Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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.

<iframe>

Example

HTML

  <iframe srcdoc="

    <h1>This is the content displayed in the iframe</h1>

    <p>It's directly embedded in the HTML.</p>

  ">

  </iframe>

Result

Editor

Browser Support

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

Desktop

79	20	25	15	6

Tablets / Mobile

25	25	?	?	1.5	37

Last updated by CSSPortal on: 29th March 2024

Support Us