Iframe without src but still has content?

Question

While debugging jquery code on their site ( via chrome developer toolbar)

I noticed that their examples are given under Iframe :

Here - for example there is a sample which is under an Iframe but after investigating , I see that the Iframe doesn't have SRC

The picture shows it all

Question :

Is it possible to set content to an Iframe without setting its SRC ?

p.s. this menu also shows me an empty content

Solution 1

Yes, it is possible to load an empty <iframe> (with no src specified) and later apply content to it using script.

See: http://api.jquery.com/jquery-wp-content/themes/jquery/js/main.js (line 54 and below).

Or simply try:

<iframe></iframe>

<script>
document.querySelector('iframe')
        .contentDocument.write("<h1>Injected from parent frame</h1>")
</script>

Solution 2

Yes, Here is how you change the html of the iframe with jQuery

var context = $('iframe')[0].contentWindow.document,
    $body = $('body', context);
$body.html('Cool');

Demo: http://jsfiddle.net/yBmBa/

document.contentWindow: https://developer.mozilla.org/en-US/d...

Solution 3

Looks like this is the most compatible solution across browsers and also it is recognized by the W3C

<iframe src="about:blank"></iframe>

Solution 4

Sure. You can get a reference to the iframe's document object with

var doc = iframe.contentDocument;

and then you can create and add elements like you do in the current document.

If the iframe doesn't have a src attribute, it will still contain an empty document. I believe though that at least older IE versions require the src attribute to be set, otherwise the iframe won't have a document.

See also: contentDocument for an iframe.

Solution 5

There's the srcdoc attribute in iframe that allows setting HTML content directly:

<iframe srcdoc="<p>Hello world!</p>" src="demo_iframe_srcdoc.htm"></iframe>

src is for backup in case the browser does not support srcdoc.

View more solutions

Comments

[Royi Namir]

I dont think so ,,,i.stack.imgur.com/8zghY.png (jsbin.com/ezekuw/1/edit)

[Felix Kling]

If the src attribute is set, then yes, the content can only be accessed if the loaded document is from the same domain.

[Royi Namir]

I wonder why did they do that....it's much easier having small html files being set as SRC rather then getting their content and inject to an iframe.... I really really wonder if there's something behind this decision

[Felix Kling]

Maybe they want the documentation for a method in a single file but still have some kind of sandbox for each example. But that's just an assumption. You could ask them ;)

[haim770]

@RoyiNamir, they already have the code loaded in the DIV above the Iframe, it's much easier to eval that code lines for demo purposes into an Iframe than to create a separate static html for every piece of demo code.

[haim770]

@RoyiNamir, what do you mean?

[Royi Namir]

@haim770 look at the viewsource of the page , you wont find any js code which can be evaled

[Felix Kling]

@Royi: That doesn't matter. You can still exact the text content and you have valid code.

[Royi Namir]

@FelixKling hu? I really really dont think they strip the html tags in order to get the pure js...

[haim770]

See api.jquery.com/jquery-wp-content/themes/jquery/js/main.js (line 48). they do extract the javascript code from the 'beautified' example and evaluating it (not using eval though).

[Felix Kling]

@Royi: Why should they? They just take the whole HTML in the example and dump it in the iframe. And by just taking the text content of the div that holds the source, they get rid of all the syntax highlighting markup.

[Mike]

$('iframe')[0].contentDocument.write("<h1>Injected from parent frame</h1>") seems to cause the loading icon in the browser Tab to constantly spin.

[ChanX]

use document.close() to close writing

[OZZIE]

why do people do it? what's the use-case? you could just append a div or even custom html elements to root body and use inline styling and/or long strange css classes so you are sure nothing collides with existing styling if that's what you want to solve..

[Fred]

@OZZIE It is used by codepen.io to let the user write CSS and JS code that gets executed in the iframe, then the user can just write the CSS code without it inlining it.