使用jQuery更新iFrame中的內容實時和即時...？

我正在使用iframe在窗體旁顯示網站。我想根據各種輸入字段的值更新該iframe中的某些內容。使用jQuery更新iFrame中的內容實時和即時...？

這就是我想要做的（工作的iframe之外）：http://jsfiddle.net/YkKUS/

textarea的將是iframe和那會進行更新將是iframe中的內容之外。

這裏適合我的代碼與我的iframe的工作：

  $('.liveDemoFrame').load(function(){ // load the iframe   
       $(this.contentDocument).find('h1').html($('textarea').val());     
       $('textarea').keyup(function() { 
        $(this.contentDocument).find('h1').html($(this).val()); // this line is screwing something up?!? 
       });  
      });

第五行引起了我一些問題。 iframe實際上更新成功與我的textarea的內容，但只有當我刷新頁面。它不是實時更新它&這是我這樣做的唯一原因！

謝謝！

來源

2011-10-30 tctc91

現在我看到了，如果只有你會把你的完整代碼放在jsfiddle中。這在你的keyup函數中是指textarea dom元素，而不是iframe！ –

我這樣做是在父頁面，它似乎工作：

$(document).ready(function(){ 
    $('#textarea').bind('keyup', function() { 
     var iframedoc = $('#iframe').get(0).contentDocument; 
     $(iframedoc).find('h1').html($(this).val()); 
    }); 
});

來源

2011-10-30 21:28:00 Iain

Yessssss！非常感謝。這是完美的。 – tctc91

jQuery可能存在一些問題，或者您可能做得不正確。無論哪種方式，在iframe中實際運行的內的一半代碼可能是最簡單的;那麼你可以調用iframe.contentWindow.getHtml（）或iframe.contentWindow.setHtml（）。另外IIRC，contentDocument也不是標準的;一些瀏覽器需要contentWindow.document或類似的。

然而，罪魁禍首應該是這樣：

$('.liveDemoFrame').load(function(){ 
    $(this.contentDocument).find('h1').html($('textarea').val()); 
    $('textarea').keyup(function() { 
     // here this refers to textarea dom element, not iframe 
     $(this.contentDocument).find('h1').html($(this).val()); 
    });  
});

修復也能像

$('.liveDemoFrame').load(function(){ 
    var iframeDocument = $(this.contentDocument); 
    iframeDocument.find('h1').html($('textarea').val()); 
    $('textarea').keyup(function() { 
     // here this refers to textarea dom element, not iframe 
     iframeDocument.find('h1').html($(this).val()); 
    });  
});

來源

2011-10-30 20:18:30

-1

你不能從它外面的iframe做的東西，那將是一個巨大的安全漏洞

來源

2011-10-30 21:06:42 Iain

真的嗎？我可以在iframe中的特定區域上使用像hide（）這樣的東西，它可以正常工作，但keyup事件根本不起作用。 – tctc91

嗯，iframe是與父頁面相同的域嗎？ – Iain

是的。我讀了一些在iframe頁面中包含jquery的地方，可能會導致問題，所以我試圖刪除它，但仍然沒有運氣。 – tctc91

使用jQuery更新iFrame中的內容實時和即時...？

回答

相關問題