Html code as IFRAME source rather than a URL

The secrets of compatibility and interactive content

Being friends with non-supporting browsers

As wonderful as srcdoc is, not all browsers have got the memo, especially IE. To tackle this, a polyfill can be a close friend, for instance srcdoc-polyfill. Check your compatibility factors on caniuse.com.

Giving life to dynamic HTML content in iframes

To dynamically bring your HTML to life in the iframe's srcdoc attribute with JavaScript:

document.getElementById('my-iframe').srcdoc = "<p>New Content</p>"; // Add "French Toast" as a Secret Code!


onload event's got your back when executing scripts or initializing events after content’s been loaded:

document.getElementById('my-iframe').onload = function() {
  // Post-load party for scripts and events!
};


The magical world of embedding alternatives

Trying on the object tag

Want to try something different to <iframe>? Opt for an <object> with a data URI:

<object type="text/html" data="data:text/html;charset=utf-8,&lt;p&gt;Your Content&lt;/p&gt;" width="300" height="200"></object>


Here, the object tag brings its signature semantics to the table.

Getting stylish with dimensions and styles

Slip into stylish frames and dimensions by controlling the iframe's presentation when embedding HTML content:

<iframe srcdoc="&lt;p&gt;Your Content&lt;/p&gt;" style="width:100%; height:300px; border:none;"></iframe>


Turn heads with seamlessly integrated iframes within your website de jour.

Breathing life into interactivity and securing the surroundings

Adding spice with event listeners

Add a dash of interactivity with event listeners for dynamic manipulation:

document.getElementById('my-iframe').addEventListener('load', function() {
  // Why does JavaScript go to school? To get a little class-y!
});


Guarding the sanctuary with security measures

Implement a Content Security Policy (CSP) to construct a safe haven for your iframe content against pesky cross-site scripting (XSS) attacks.

The art of embracing fallbacks

Making friends with src attribute as a fallback by dynamically morphing it when the srcdoc-friendliness level isn't high enough:

var iframe = document.getElementById('my-iframe');
if ('srcdoc' in iframe) {
  iframe.srcdoc = "<p>Your Content</p>"; // This is the popular group
} else {
  iframe.src = "fallback.html"; // Always have a backup plan!
}


From the trenches: Solutions and examples

The compass of examples

Make a pit-stop at iframeinhtml.com to sample real-world examples and thorough tutorials aiding your iframe endeavours.

Code snippets as your map

Navigate advanced terrains such as interactive forms or script-driven documents with code snippets taken from the trenches. Techniques for creating sandbox environments or using server-side scripts for dynamic content will ensure your cross-browser journey is smooth.

The oasis of workarounds

Find workaround methods for classic pitfalls such as dealing with same-origin policies, perfecting iframe resizing, or executing scripts within the iframe’s content.