How to create iframe about:blank without src but content html javascript

3
votes

I want to create a iframe without src ( about:blank ) but that iframe content some javascript html

I need to do it because I don't want create a hosted webpages on server for this mission, this will make more connection to server which are no good for resource. And also don't want to write direct javascript html on webpage because they make the webpage load slow most time when load/running.

How to do it by using javascript (jquery maybe )?

iframe eg :

<iframe src="about:blank" width="300" height="250" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" ></iframe>

and its content:

<div>xxx</div>
<script type="text/javascript">var abc=1 </script>
<script type="text/javascript" src="http://1234.net/js.js"></script>

UPDATE

Thanks for some answered following. But I need to clarify that script will create iframe by javascript also, because the need to create iframes in one page with different ids. Please look at my test: http://jsfiddle.net/rDkEw/

The problems are: if use document.body.appendChild, the iframe will create on body of webpage, but I need it to keep it inside the current div which hold the JavaScript.

5
javascriptiframe
Does this work? jsfiddle – andrew

5 Answers

9
votes

For everyone googling this after 2016: Use a data: URL, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents.

<iframe src="data:text/html, <h1>Your HTML</h1>"></iframe>
4
votes

An <iframe> has a contentDocument property representing its… content’s document. You can use write() on that. Here’s a demo.

2
votes

You can do it like this:

var iframe = document.getElementById('iframeid');

var div_el = document.createElement('div');
div_el.innerHTML = "....";
iframe.contentWindow.document.body.appendChild(div_el);

A jQuery solution:

$('#iframeid').contents().find('body').append("<div>.....</div>");
0
votes

With jQuery:

$('#myIframe').appendTo('#iframeDiv');

your iframe id = "myIframe"

your html content div id = "iframeDiv";

note: without jQuery, the two other answers seem perfectly suited.

0
votes

You can add any content to page in iframe as described here but as you don't have a page loaded I doubt the javascript you add to this page will work. You can give it a try.