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

admin管理员组

文章数量:1201401

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=".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: /

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.

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.

• javascript
• iframe

Share Improve this question Follow edited Aug 11, 2014 at 19:21 Guillermo Gutiérrez 17.8k1818 gold badges9191 silver badges118118 bronze badges asked Feb 26, 2013 at 4:36 Binh NguyenBinh Nguyen 1,31333 gold badges1717 silver badges2727 bronze badges 1

• Does this work? jsfiddle – andrew Commented Oct 13, 2014 at 20:53

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 12

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>

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

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>");

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.

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.

本文标签： How to create iframe aboutblank without src but content html javascriptStack Overflow