Iframe without src but still has content?

42

votes

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

javascriptjqueryhtmldomiframe

47

votes

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>

7

votes

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

6

votes

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

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

3

votes

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.

1

votes

Try giving :

src ="javascript:false;"

1

votes

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

1

votes

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.

0

votes

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!
});

0

votes

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>

Iframe without src but still has content?

9 Answers