Html code as IFRAME source rather than a URL

by

You can do this with a data URL. This includes the entire document in a single string of HTML. For example, the following HTML:

<html><body>foo</body></html>

can be encoded as this:

data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E

and then set as the src attribute of the iframe. Example.

Edit: The other alternative is to do this with Javascript. This is almost certainly the technique I’d choose. You can’t guarantee how long a data URL the browser will accept. The Javascript technique would look something like this:

var iframe = document.getElementById('foo'),
    iframedoc = iframe.contentDocument || iframe.contentWindow.document;

iframedoc.body.innerHTML = 'Hello world';

Example

Edit 2 (December 2017): use the Html5’s srcdoc attribute, just like in Saurabh Chandra Patel‘s answer, who now should be the accepted answer! If you can detect IE/Edge efficiently, a tip is to use srcdoc-polyfill library only for them and the “pure” srcdoc attribute in all non-IE/Edge browsers (check caniuse.com to be sure).

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

More Related Contents:

  1. HTML iframe not working when i write src= of facebook
  2. Are iframes considered ‘bad practice’? [closed]
  3. How to allow http content within an iframe on a https site [duplicate]
  4. How to force link from iframe to be opened in the parent window
  5. HTML embedded PDF iframe
  6. HTML iframe – disable scroll
  7. access iframe content from a chrome’s extension content script
  8. Accessing object in iframe using VBA
  9. “Full screen”
  10. Difference between iframe, embed and object elements
  11. Hide horizontal scrollbar on an iframe?
  12. Are IFrames (HTML) obsolete? [closed]
  13. Remove border from IFrame
  14. Why should I not use HTML frames? [closed]
  15. iframe with external page not working
  16. HTML5 iFrame Seamless Attribute
  17. Why is a self-closing iframe tag preventing further DOM elements to be displayed?
  18. Some Elements missing while downloading from HttpWebRequest?
  19. Can’t show some websites in iframe tag
  20. How to force Iframe to run quirks under a standard parent frame
  21. How to center an iframe horizontally?
  22. Getting youtube.com to load in iFrame
  23. Remove scrollbar from iframe
  24. IE8 embedded PDF iframe
  25. HTML5 : Iframe No scrolling?
  26. iframe contents cant appear in Firefox
  27. Media queries not working inside an iframe
  28. z-index and iFrames!
  29. Is there a way to get the parent URL from an Iframe’s content?
  30. iframe refuses to display

Leave a Comment