Question

我想更改我的iframe内容，但我不明白

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

使用此代码，我总是拥有自己的google页面，而不是带有hi的ifram

Answer 1

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

虽然这是正确的，但是当您尝试修改外部资源的主体时，内容永远不会改变。由于跨站点脚本规则，您无法执行此操作。

修改

唯一的方法是执行@ user1153551所做的操作并替换整个文档。

Answer 2

选中此Demo jsFiddle

您必须在iframe文档中使用load事件并调用包含文档中的加载函数来替换正文包含。

的jQuery

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

HTML

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

使用 .replaceWith() jQuery方法。

Answer 3

使用 document.ready

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

更改iframe内容jquery

3 个答案:

的jQuery

HTML