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

enter image description here

Question :

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

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

enter image description here

score 54 · Accepted Answer · edited Aug 15 '20 at 19:09

54

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>

edited Aug 15 '20 at 19:09

Jens Törnell

23,180
45
124
206

answered Aug 04 '13 at 14:42

haim770

48,394
7
105
133

$('iframe')[0].contentDocument.write("
Injected from parent frame
") seems to cause the loading icon in the browser Tab to constantly spin. – Mike Jun 08 '16 at 18:43
1

use document.close() to close writing – ChanX Jun 06 '17 at 10:08
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.. – OZZIE Mar 24 '20 at 12:49
1

@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. – Fred Jun 17 '20 at 16:20

score 8 · Answer 2 · edited Feb 18 '14 at 16:47

8

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...

edited Feb 18 '14 at 16:47

Sachin Jain

21,353
33
103
168

answered Aug 04 '13 at 14:52

iConnor

19,997
14
62
97

score 8 · Answer 3 · answered Aug 04 '15 at 22:29

8

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

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

answered Aug 04 '15 at 22:29

Oriol

11,660
5
35
37

score 7 · Answer 4 · answered Jul 01 '21 at 12:19

7

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.

answered Jul 01 '21 at 12:19

Juuso Ohtonen

8,826
9
65
98

score 3 · Answer 5 · edited May 23 '17 at 12:25

3

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.

edited May 23 '17 at 12:25

Community

1
1

answered Aug 04 '13 at 14:49

Felix Kling

795,719
175
1,089
1,143

If the `src` attribute is set, then yes, the content can only be accessed if the loaded document is from the same domain. – Felix Kling Aug 04 '13 at 14:55
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 – Royi Namir Aug 04 '13 at 14:57
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 ;) – Felix Kling Aug 04 '13 at 15:00
1

@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 Aug 04 '13 at 15:02
@RoyiNamir, what do you mean? – haim770 Aug 04 '13 at 15:04
@haim770 look at the viewsource of the page , you wont find any js code which can be evaled – Royi Namir Aug 04 '13 at 15:05
@Royi: That doesn't matter. You can still exact the text content and you have valid code. – Felix Kling Aug 04 '13 at 15:05
@FelixKling hu? I really really dont think they strip the html tags in order to get the pure js... – Royi Namir Aug 04 '13 at 15:06
See http://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). – haim770 Aug 04 '13 at 15:06
@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. – Felix Kling Aug 04 '13 at 15:07

score 1 · Answer 6 · answered Aug 04 '13 at 14:38

1

Try giving :

src ="javascript:false;"

answered Aug 04 '13 at 14:38

Aditya

4,453
3
28
39

1

I dont think so ,,,http://i.stack.imgur.com/8zghY.png (http://jsbin.com/ezekuw/1/edit) – Royi Namir Aug 04 '13 at 14:40

score 1 · Answer 7 · answered May 08 '18 at 05:33

Mixing best answers in javascript and jQuery, I come up with this solution for each iframe in a page:

<div class="iframewrapper ws-s-top mb-50" data-content="<!DOCTYPE html><html><head></head><body><p>Hello world</p></body></html>">
    <iframe frameborder="0" src=""></iframe>
</div>

$(".iframewrapper").each(function(){
    var html = $(this).attr("data-content");
    var iframe = $(this).find('iframe');
    var context = iframe[0].contentDocument.write(html);
    iframe[0].contentWindow.document.close(); //without this line, page loading animations won't go away!
});

score 1 · Answer 8 · answered Sep 13 '19 at 13:05

Try it.

HTML

<div id="iframecontent" style="display: none;">
    <b>Hello World!</b> <br /> <i>Hello Again !</i>
</div>

<div style="margin: auto; width: 80%;">
    <iframe height="100" width="100%" src="about:blank" name="myiframe"
     id="myiframeid"> </iframe>
    <br />
    <button id="tryIt" onclick="onTryItClick()">Try It</button>
</div>

JavaScript:

<script type="text/javascript">
function onTryItClick() {
    var content = document.getElementById("iframecontent").innerHTML;
    var iframe = document.getElementById("myiframeid");

    var frameDoc = iframe.document;
    if (iframe.contentWindow)
        frameDoc = iframe.contentWindow.document;

    frameDoc.open();
    frameDoc.writeln(content);
    frameDoc.close();
}
</script>

Reference: http://duleekag.blogspot.com/2014/01/html-iframe-without-src-attribute.html

score 1 · Answer 9 · answered Nov 01 '21 at 14:37

1

And you can even use a data uri as src:

<!-- a zero width space -->
<iframe src="data:text/plain;charset=utf-8;base64,4oCL"></iframe>
<!-- Hello World! -->
<iframe src="data:text/plain;charset=utf-8;base64,SGVsbG8gV29ybGQh"></iframe>

answered Nov 01 '21 at 14:37

RiZKiT

2,107
28
23

Iframe without src but still has content?

9 Answers9

Injected from parent frame

Linked