在Append中追加,追加Jquery中的Iframe

时间:2016-04-23 16:42:01

标签: javascript jquery html iframe

我看了看 Insert content into iFrame及其在http://jsfiddle.net/8VP4y/3/的小提琴,提出以下我遇到问题的代码。

我已经为我的问题创建了一个jsfiddle。

  

https://jsfiddle.net/cy87j70t/2/

   $( document ).ready(function() {

       $('#card2').html( '<iframe id="myFrame"></iframe>' );

       var myFrame = $("#myFrame").contents().find('body');
       var myFrame2 = $("#myFrame2").contents().find('body');

        myFrame.append('<p>OH NO TOKEN IS FOR myFrame Original ');
        myFrame2.append('<p>OH NO TOKEN IS FOR myFrame 2 ');

    });

并且HTML看起来像这样;

<div id='card2'>

</div>
<iframe id='myFrame2'>

</iframe>

我尝试使用javascript创建iframe,然后使用JSONP中的内容写入iframe(我已经省略了该部分以便于调试);

我不确定为什么它没有写入iframe,是因为iframe是由javascript创建的?

我尝试过追加,html,之后,前置,但似乎没有任何东西可以让我写入iframe

1 个答案:

答案 0 :(得分:1)

不,这不是错误。

Updated jsfiddle

正确的方法是:

$(function () {
  $('#card2').html('<iframe id="myFrame"></iframe>');

  // add the src attribute so that the load event will take place in every browser..
  $("#myFrame").attr('src', 'about:blank');

  // wait for the iframe is loaded
  $("#myFrame").on('load', function(e) {
    var myFrame = $("#myFrame").contents().find('body');
    myFrame.append('<p>11111111OH NO TOKEN IS FOR myFrame Original</p>');
  });



  var myFrame2 = $("#myFrame2").contents().find('body');
  myFrame2.append('<p>2222222222  OH NO TOKEN IS FOR myFrame 2</p>');
});
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<div id='card2'>

</div>
<iframe id='myFrame2'>

</iframe>