Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot modify content of iframe, what is wrong?

Tags:

html

jquery

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>
like image 719
Slay Avatar asked Jul 25 '12 20:07

Slay


2 Answers

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.

like image 113
jbabey Avatar answered Oct 22 '22 00:10

jbabey


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!');
    });
});​
like image 31
Oscar Jara Avatar answered Oct 22 '22 00:10

Oscar Jara