Specifying content of an iframe instead of the src attribute to a page

Solution 1:

You can .write() the content into the iframe document. Example:

<iframe id="FileFrame" src="about:blank"></iframe>

<script type="text/javascript">
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
   doc.close();
</script>

Solution 2:

iframe now supports srcdoc which can be used to specify the HTML content of the page to show in the inline frame.

Solution 3:

You can use data: URL in the src:

var html = 'Hello from <img src="http://stackoverflow.com/favicon.ico" alt="SO">';
var iframe = document.querySelector('iframe');
iframe.src = 'data:text/html,' + encodeURIComponent(html);

<iframe></iframe>

Difference between srcdoc=“…” and src=“data:text/html,…” in an iframe.

Convert HTML to data:text/html link using JavaScript.

Specifying content of an iframe instead of the src attribute to a page

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts