14

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 !

Lucas
  • 271
  • 2
  • 4
  • 12

3 Answers3

30

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

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • It seems to be what I need. Do you know if there is a way to create the code that goes into the HTML data using an Element or I don't know how, and then use it the the src ? Because my code is JavaScript and for the moment I can not do it directly. But it will try again. – Lucas Aug 12 '10 at 17:59
  • @Lucas jQuery's `.html()` should give you the HTML contents of any element. `encodeURIComponent()` should encode it properly for use in the first example. There is no native `base64()` implementation in JS but better go with the URIencoded way, as base64 bloats the code by 33%. – Pekka Aug 12 '10 at 18:48
  • In fact that is still not working but my current error is an "Unsafe JavaScript attempt to access frame with URL, Domains, protocols and ports must match" error. I will do other searches for that. But thanks =) – Lucas Aug 12 '10 at 19:36
  • @Lucas awww, that's not nice. Maybe worth another question, there should be a way around that if you create the element yourself. – Pekka Aug 12 '10 at 19:46
  • @Pekka the code I want to add into the iframe is a google ad, that call for a JS google code, which it itself using an iframe. That's why it doesn't like it I think. I think I saw somewhere that I could be able to fix this by setting the domain etc. I will try it by my own a bit then ask a question if I can't do it alone! – Lucas Aug 12 '10 at 20:08
  • Just in case, The full error is: "Unsafe JavaScript attempt to access frame with URL file:///home/lucas/Bureau/google_ad.html from frame with URL data:text/html, . Domains, protocols and ports must match." "file:///home/lucas/Bureau/google_ad.html" is my experimental file to try things. " " is my (simplified) ad code. – Lucas Aug 12 '10 at 20:10
  • @Lucas first step, move away from `file://` urls to a local or remote web server. Browsers are awfully strict with those. – Pekka Aug 12 '10 at 20:26
  • @Lucas I'd say that calls for a question of its own, with code and everything. – Pekka Aug 13 '10 at 08:10
  • @Pekka yes I have already done that here http://stackoverflow.com/questions/3473416/problem-to-display-dynamically-a-javascript-google-ad-in-an-iframe-using-jquery/3474598#3474598 (= – Lucas Aug 13 '10 at 16:37
  • I'm looking to populate an iframe with pdf files around 200Kb from a Java applet using javascript... do you think this would be possible with this solution? – Jaime Hablutzel Aug 03 '12 at 20:35
  • @jaime I'm not sure whether and how data URIs work with the PDF viewer plugin. Might be worth a try though. – Pekka Aug 03 '12 at 21:15
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.

Ryan Brunner
  • 14,723
  • 1
  • 36
  • 52
-1

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;
N30
  • 3,463
  • 4
  • 34
  • 43