Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Basic

HTML Reference

HTML srcdoc Attribute

Posted in HTML Tutorial
Updated on Sep 22, 2024
By Mari Selvan
👁️ 44 - Views
⏳ 4 mins
💬 1 Comment
HTML srcdoc Attribute

Photo Credit to CodeToFun

🙋 Introduction

The srcdoc attribute is a useful feature in HTML, primarily used with the <iframe> element.

It allows developers to embed HTML content directly within the srcdoc attribute, eliminating the need for a separate external file specified by the src attribute.

This attribute provides a convenient way to include inline content within an iframe, making it a versatile tool for web development.

🎯 Purpose of srcdoc

The primary purpose of the srcdoc attribute is to specify the HTML content that should be displayed within an <iframe> element.

Unlike the traditional approach of using the src attribute to link to an external document, srcdoc allows developers to include the content directly in the HTML document.

💎 Values

The srcdoc attribute accepts a string value containing the HTML content to be displayed within the iframe.

This value can include any valid HTML markup, including text, images, and other elements.

It provides a convenient way to create self-contained iframes without the need for external files.

📄 Example

Let's look at a simple example of how to use the srcdoc attribute in an HTML document:

srcdoc.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML srcdoc Attribute</title>
</head>
<body>

  <h1>Embedding Content with srcdoc</h1>

  <iframe srcdoc="<p>This is the embedded content within the iframe.</p>" width="300" height="200"></iframe>

</body>
</html>

🧠 How it Works

In this example, the srcdoc attribute is used to directly embed a simple paragraph within the <iframe> element. This can be particularly useful when you want to include lightweight content without creating a separate HTML file.

🔄 Dynamic Values with JavaScript

You can also dynamically set the srcdoc attribute using JavaScript.

This can be useful when you want to update the content of the iframe based on user interactions or other dynamic events. Here's a brief example:

srcdoc.html
Copied
Copy To Clipboard
<script>
  // Dynamically set srcdoc for an iframe
  const dynamicContent = "<p>This content is dynamically set with JavaScript.</p>";
  document.getElementById("dynamicIframe").srcdoc = dynamicContent;
</script>

🧠 How it Works

In this script, the srcdoc attribute for an iframe with the id "dynamicIframe" is dynamically set to a new HTML content string. This flexibility allows developers to update iframe content on the fly.

🏆 Best Practices

  • Use the srcdoc attribute when you want to embed simple and self-contained HTML content within an iframe.
  • Be mindful of security considerations, as dynamically setting content with JavaScript may expose your application to potential vulnerabilities.
  • Test your iframes across different browsers to ensure consistent behavior, as browser support for certain features may vary.

🎉 Conclusion

The srcdoc attribute provides a convenient way to embed HTML content within iframes directly.

Whether you're including static content or dynamically updating it with JavaScript, understanding how to use srcdoc enhances your ability to create interactive and engaging web pages.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mari Selvan
Mari Selvan
8 months ago

If you have any doubts regarding this article (HTML srcdoc Attribute), please comment here. I will help you immediately.

We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy