change iframe content jquery

2020-02-29 09:55发布

I'd like to change my iframe content but I don't understand how

<html>
    <head>
        <title>test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    </head>
    <body>
        <iframe id="frame" width="100%" height="95%" src="http://google.com"></iframe>
    <script type=text/javascript >
        $('#frame').contents().find( "body" ).html('<p>hi</p>')
    </script>
    </body>

</html>

With this code I always have my google page and not a ifram with hi

标签： javascript jquery html iframe

3条回答

趁早两清

2楼-- · 2020-02-29 10:36

use document.ready

<script type=text/javascript >
  $(document).ready(function(){        
      $('#frame').on('load', function() {
       $(this).contents().find( "body" ).html('<p>hi</p>');
     });
  });
</script>

0人赞添加讨论(0) 举报

Juvenile、少年°

3楼-- · 2020-02-29 10:48

Check this Demo jsFiddle

you have to use load event within the iframe's document and calling out to a load function in the containing document to replace to a body contain.

jQuery

$('#frame').load(function() {
  $('#frame').replaceWith('<p>hi</p>');
});

HTML

<iframe id="frame" width="100%" height="95%" src="http://w3schools.com"></iframe>

Use .replaceWith() jQuery Method.

0人赞添加讨论(0) 举报

再贱就再见

4楼-- · 2020-02-29 10:51

<script type="text/javascript">
  $(document).ready(function(){        
       $('#frame').on('load', function() {
           $(this).contents().find( "body" ).html('<p>hi</p>');
       });
  });
</script>

While this is right, the content will never change as you are trying to modify the body of an external resource. You cannot do this due to cross-site scripting rules.

EDIT:

The only way to do it is to do what @user1153551 did and replace the whole document.

0人赞添加讨论(0) 举报