Cannot modify content of iframe, what is wrong?

html, jquery

Solution

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

Problem

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

Original source