Replace Entire Content of Iframe

Question

Is there a way to replace the ENTIRE contents of an iframe using Javascript (or Jquery)?

For example if my iframe had the following content...

blah outside of html
<html>
<head>
</head>
<body>
<h1> my title </h1>
</body>
</html>
blah outside of html

..It could all be replaced by your script :)

The best that I've seen so far is this:

$(youriframe).contents().find('html').html('your content here');

but that still wouldn't replace the content outside of the html tags. We have an interesting scenario where we must assure that ALL the content is replaced.

OR a new iframe with fresh content is created and simply replaces the previous iframe.

Please no comments about the src attribute.

Is `theIframe.parentNode.replaceChild(theIframe, theNewIframe)` an option? — Wolph, Apr 26 '11 at 00:16
*Why* is changing the `src` attribute not an option? We can't really help unless we understand your requirements. — Andrew Hare, Apr 26 '11 at 00:22
Hahaha I'm pretty sure my requirements were clear. Anyways, we're making a server request, generating some long running content on the server, returning it back to the client. The response data includes the content for the parent window AND the iframe. — Erik Lott, Apr 26 '11 at 00:37
possible duplicate of [Write elements into a child iframe using Javascript or jQuery](http://stackoverflow.com/questions/997986/write-elements-into-a-child-iframe-using-javascript-or-jquery) — Nakilon, Aug 22 '15 at 19:49

score 25 · Answer 1 · edited Apr 25 '22 at 12:47

The code works fine in Chrome or FireFox, but in IE8, nothing will be showed or the scroll bar in iframe won't appear.

Tried this one:

var doc = document.getElementById(iframeId).contentWindow.document;
doc.open();
doc.write(iframeContent);
doc.close();

this works on my case, both ie8 and FF/chrome.

If i use Rachel's method, the iframe content will be like this in all browsers:

<iframe>
    <html>
        <head>
        </head>
        <body>
        </body>
    </html>
</iframe>

score 20 · Answer 2 · edited May 23 '17 at 12:02

20

I'm guessing that you're not having problems with cross-site scripting in this instance... Have you had any luck using contentWindow? Something like this seems to work well enough for me:

iframe = document.getElementById('iframe_id');
iframe.contentWindow.document.open()
iframe.contentWindow.document.write(new_content_here);

Not my idea, found it here: Write elements into a child iframe using Javascript or jQuery

edited May 23 '17 at 12:02

Community

1
1

answered May 25 '11 at 18:39

James Alday

873
9
23

If you're going to do this more than once, you'll need to use iframe.contentWindow.document.close(), otherwise Firefox will ignore future writes. The close() method will also trigger the frame's load event. – claviska Nov 24 '15 at 17:26

score 0 · Answer 3 · answered Mar 16 '20 at 14:25

0

I solved with this code:

$('#IframeID').contents().find("html").html(html);

Although this way you can work better in many of the cases, there will be more order:

$('#IframeID').contents().find("head").html(head);
$('#IframeID').contents().find("body").html(body);

So, you can play with head and body separately, and a bad change on body will not affect your head.

I tested on Chrome.

answered Mar 16 '20 at 14:25

Carlos Eduardo Salazar Mori

363
6
13

After a time, I can say the second form is the correct answer. I replace head for stylesheets and body separately. I used a HTML template with head and body separated by a string, and with a split() command I get it separated. – Carlos Eduardo Salazar Mori Jul 15 '20 at 12:38

score -3 · Answer 4 · answered May 01 '11 at 21:32

have a similar scenario, where I am generating a new iFrame with content from a different domain each time the row of a table is clicked.

To do this, I use jQuery AJAX and PHP. PHP looks at my MySQL table and gets the URL of the iFrame I want to load; it generates the HTML for an iFrame, and I use jQuery AJAX to replace that content.

My HTML looks something like this:

<div class="xFrame">
    <iframe id="xFrameWindow" name="xFrameWindow" src=""></iframe>
</div>

And my AJAX call looks like this:

function loadPage(record_id) {

    $.ajax({
        type: "POST",
        url: "php/ajax_handler.php",
        data: "action=makeIFrame&record_id=" + record_id,
        success: function(msg){
            $('.xFrame' ).html(msg);
        }
    });
}

The code replaces the HTML of the div that contains the iFrame with a new iFrame.

Hope this (or something similar) works for you.

That replaces the entire iframe including the scr attribute. In this case, I need to replace the *content* of an iframe directly, from within the parent window, without refreshing the iframe — Erik Lott, May 01 '11 at 22:47

Replace Entire Content of Iframe

4 Answers4

Linked