Is it possible to "fake" the src attribute of an iframe ?

Question

Hello everybody !

I try to add dynamically an iframe to a web page using JavaScript. I would like to know if that's possible to set the src attribute of my iframe without using another html file via an URL. I mean is there a way to "fake" the html for the src attribute file with a JS variable where we I can set my code (which is JS itself) ? I would use the DOM createElement to create the iframe in jQuery.

Thanks !

Answer 1

If you're controlling the iframe entirely client-side, and never need to make server-side requests with that iframe, it's proably easier to style a div to appear like an iframe (look into the overflow property), where you'll have far simpler and more direct control to the DOM contents of that div.

Answer 2

You could look into data:URIs.

<iframe src="data:text/html, .... URLencoded HTML data ....">

alternatively

<iframe src="data:text/html;base64, .... base64 encoded HTML data ....">

The scheme is supported by IE >= 8 (MSDN source), Firefox, Safari 3+ and Opera.

It has differing length limits. Opera is said to cut off at about 4 kilobytes; Internet Explorer at 32 kilobytes. Firefox has no explicit length limit.

More on data URIs and tools for converting at Mozilla Developer Central

Answer 3

Ryan Brunner has a good point. Try jQuery's load method. It even lets you load parts of a page. Say I want to load a table with id people into a div with id folks,

$('#folks').load('people.htm #people');

http://api.jquery.com/load/

And because it's jQuery, it works very well in all supported browsers. :)

Answer 4

following code should do what you want.

you can leave the src attribute empty.

var yourcontent="<div>your stuff</div>";
window.frames['frame_name'].document.write=yourcontent;