18

I am trying to code an iFrame to act as a test area in an in-browser HTML/Javascript/CSS IDE in chrome, but I am losing a lot of functionality due to certain bugs, and I was wondering if someone could tell me how to set the .src attribute of the iFrame to a URL with the html Javascript CSS etc code encoded directly in the .src attribute. Don't tell me it can't be done, because I know it can, I just lost the web page where I found this method. Also, as a side note, would it be possible to programmatically force this iFrame to refresh?

Thank you for your time,

Chris

chrismamo1
  • 917
  • 1
  • 7
  • 15
  • Why do you need to do this in the first place? What bugs are you referring to? – Pekka Dec 11 '11 at 19:07
  • Javascript will not execute properly if I simply edit the iFrames contents through standard DOM. – chrismamo1 Dec 16 '11 at 17:59
  • 1
    @Pekka, I'm sorry. Maybe I'm not explaining it correctly, but I have seen examples in which an iFrame's src attribute is replaced with a Data URI of type text/html. Could someone please at least direct me to a page with instructions for setting an iFrames .src attribute to a Data URI/URL encoded from a string in Javascript, I could try to figure out the rest. Please, I still haven't figure this one out. – chrismamo1 Dec 20 '11 at 19:59
  • this [won't work at all](http://stackoverflow.com/questions/7405345/data-uri-scheme-and-internet-explorer-9-errors) in Internet Explorer - that is a strong counter-argument for many uses. I'm not sure this is the right way to solve whatever your problem is – Pekka Dec 20 '11 at 20:05

5 Answers5

10

Use the srcdoc attribute instead, you can just whack raw HTML in it.

Demo

<iframe srcdoc="<h1>HELLO</h1>"></iframe>
<iframe id="dynamic"></iframe>
<script>document.getElementById('dynamic').srcdoc = '<i>there</i>';</script>

Works in everything except the MS browsers.
Use sandbox to make it more secure.

Hashbrown
  • 12,091
  • 8
  • 72
  • 95
  • 1
    I was using the [ "src" = "data:text/html;charset=utf-8,"+content ] approach and it worked in most cases. However, chrome would refuse to display content when it exceeded a certain length. This approach works even with large content, so in that at least it is superior. – Shadetheartist Aug 06 '19 at 21:39
  • 2
    I'd hope so, it's made-for-purpose instead of a workaround. Glad to see res'ing old threads still helps people – Hashbrown Aug 07 '19 at 05:28
8

From my research it looks like this has been deemed a security risk and so is disallowed in all browsers.

MS IE site link excerpt:

Data URIs are supported only for the following elements and/or attributes.

  • object (images only)
  • img
  • input type=image
  • link
  • CSS declarations that accept a URL, such as background, backgroundImage, and so on.

HTML5 Security Cheatsheet: http://html5sec.org/

Nathan Osman
  • 71,149
  • 71
  • 256
  • 361
rushkeldon
  • 1,343
  • 1
  • 10
  • 13
6

iframeEl.src = "data:text/html;charset=utf-8,"+content;

Russ Danner
  • 693
  • 3
  • 11
  • 1
    You cannot use a data URI if you need to support IE - see http://msdn.microsoft.com/en-us/library/cc848897%28v=vs.85%29.aspx – robocat Jul 01 '13 at 03:03
3

Yes it can be done - see http://sparecycles.wordpress.com/2012/03/08/inject-content-into-a-new-iframe/

Note that the iframe will have the same origin as the original page, which might not be desired and may have serious security considerations depending on what you are doing.

An example of using the javascript: scheme technique is here: http://jsbin.com/uhenuz/4 (If used with https would need extra googling and good testing to check that mixed https/http warning can never come up.)

robocat
  • 5,293
  • 48
  • 65
-1

Refresh iframe:

document.getElementById('iframeid').src = document.getElementById('iframeid').src
John Smith
  • 97
  • 5