Alex Rivera | Logout

Cannot modify content of iframe, what is wrong?

Asked 2012-07-25T20:23:00.883
13

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>
jquery html
Edit
Report

1 Answer

0

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");
});
answered 2012-07-26T07:14:13.830

Your Answer