Cannot modify content of iframe, what is wrong?

Question

I am trying to modify content of an iframe but it does not work.

This is my main.html

<html>
<head><title>Main page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<h3>Main page</h3>
<iframe src="ifr.htm" id="ifr" name="ifr"></iframe>
</body>

<script>
$(document).ready(function(){
    $('#ifr').load(function(){
        $('#ifr').contents().find('body').html('Hey, i`ve changed content of <body>!    Yay!!!');
    });
});

</script>
</html>

This is my ifr.htm

<html>
<head><title>Iframe page</title></head>
<body>
 Content to be displayed in iframe ...
</body>
</html>

An iframe is independent of the frame that is displaying it. To apply changes (styles / content / etc.) to the iFrame page you need to edit that page. If you did edit that page but are not seeing the changes, you probably just need to clear the cache for that page. Visit the iframe page directly and hit refresh until you see the change — ckaufman, Jul 25 '12 at 20:26
can you elaborate on `does not work`? do you get any errors? — jbabey, Jul 25 '12 at 20:26
[It's working here](http://jsfiddle.net/heera/HuuMZ/1/), content is being changed. — The Alpha, Jul 25 '12 at 20:29
@SheikhHeera that is only working because the initial load of the iframe failed (404) — jbabey, Jul 25 '12 at 20:33
The file loaded in the `iframe` is `ifr.htm` but the file is named `ifr.html`. — Oliver Moran, Jul 25 '12 at 20:34
Hi, my ifr is named as htm.. its an typo in stackoverflow, edited it. — Slay, Jul 25 '12 at 20:41

Oscar Jara · Accepted Answer · 2019-08-26T14:42:57.687

18

Please don't forget the cross-domain policy, otherwise it won't work.

Live demo: http://jsfiddle.net/oscarj24/wTWjF/

(Just to know, I am not using a 404 page, take a look)

Try this:

$(document).ready(function(){
    $('#ifr').ready(function(){
        $(this).contents().find('body').html('Hey, I have changed the body content yay!');
    });
});

edited Aug 26 '19 at 14:42

answered Jul 25 '12 at 20:59

Oscar Jara

14,129
10
62
94

1

I tried the example, and it doesnt function anymore. The jsfiddle you included just shows an iframe with a 404 in it. I dont see that message in the document anywhere in the iframe that says "I have changed the body content" – Mister SirCode Mar 24 '21 at 10:17

score 3 · Answer 2 · answered Jul 25 '12 at 20:34

3

Assuming you are honoring the cross-domain policy, this sounds like a timing issue. Chances are your iframe has already finished loading when the document.ready of the parent page fires.

You could try changing your frame.load to frame.ready as .ready will fire immediately if it is bound after the ready event has already triggered.

answered Jul 25 '12 at 20:34

jbabey

45,965
12
71
94

something is going really weird, i copy/paste the exact code and it couldnt work, however it work in jsfiddle.. any insights? – Slay Jul 25 '12 at 20:47
@Slay if you are running in IE i know the iframe has a `readyState` property you can interrogate. i'm not sure if the other major browsers support this property, though. – jbabey Jul 26 '12 at 00:34

score 0 · Answer 3 · answered Jul 26 '12 at 07:14

You would do something like this:

You set the src attribute of your iFrame to a blank page (blank.htm) or "", then in the ready handler you change the src to ifr.htm.

$(document).ready(
    $('#ifr').load(function(){
        $(this).contents().find('body').html('Hey, i`ve changed content of <body>!    Yay!!!');
    });
    $('#ifr').attr("src", "ifr.htm");
});

Cannot modify content of iframe, what is wrong?

3 Answers3

Linked

Related