JQuery插入腳本和HTML到Iframe中

Question

我試圖將腳本& HTML插入到iframe中。我的問題是我可以將HTML追加到iframe，但我不能追加它，並保持iframe的來源。

最終的目標是將HTML加載到iframe源文件中並覆蓋。請指教。 我覺得我在這一點上有點偏離。

$(function() { 
      var $frame = $('<iframe class="viewTrackingFrame" id="viewframe" src="https://www.google.com" width="100%" height="100%" style="width:100%; height:100%;position:relative;">'); 
      $('body').html($frame); 
      setTimeout(function() { 
       var doc = $frame[0].contentWindow.document; 
       var $body = $('body',doc); 
       $body.html('<h1>Test</h1>'); 
       $body.html('<div id="cursor" style="position:absolute;style:z-index:999999;"><img width="80" src="/assets/img/cursor_blue.png" /></div>'); 
       $body.html('<p id="test" style="z-index:9999999;">The queue length is: <span></span></p>'); 

      }, 1); 
     }); 

Answer 1

以下是您可以做的事情。 創建一個空src屬性的iframe。給它一些ID。對所需的url進行ajax調用，以獲取所有html並將其附加到iframe的正文。現在將附加的任何額外的HTML添加到相同的iframe中。我已經測試的的jsfiddle的方法，檢查了http://jsfiddle.net/9vhL2/

$(function() { 
    var $frame = $('<iframe class="viewTrackingFrame" id="viewframe" src="" width="100%" height="100%" style="width:100%; height:100%;position:relative;">'); 
      $('body').html($frame); 
       var $body = $("#viewframe").contents().find('body'); 
      $.ajax( 
       { 
        url:"/echo/html/", 
        method:'POST', 
        success:function(data){ 
         $body.append(data); 
         $body.append("<h1>Text added by script</h1>") 
         }, 
        data: {html: "<p>Text echoed back to request</p><h2>Text from page</h2>"} 
       }); 
});