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
Example
Browser Support
The following information will show you the current browser support for the HTML srcdoc attribute. Hover over a browser icon to see the version that first introduced support for this HTML attribute.
This attribute is supported by most modern browsers, though support in some browsers is unknown.
Desktop
Tablets & Mobile
Last updated by CSSPortal on: 29th March 2024
