jQuery函數更新輸入變化的iFrame內容

Question

我試圖更新iframe的內容，當具有相同ID的輸入更新時。

的iframe裏面的內容與 「預覽」

<span id="mainheadertext">This is the iFrame content</span> 

輸入框問題的ID：

<input type="text" class="form-control" id="mainheadertext" name="mainheadertext"> 

我的jQuery：

$('input').on('input', function() { 
    $("#preview").contents().find($(this).attr("id")).html($(this).val()); 
}); 

我相信它與我的發現有關，但我似乎無法弄清楚。

謝謝！

Answer 1

在你找到的時候，你只需要把你要找的id放在沒有「＃」的地方告訴你正在尋找一個id（比如一個類或一個標籤）。它應該是這樣的：

$("#preview").contents().find("#"+$(this).attr("id")).html($(this).val()); 

也許不是整個答案，但它至少是第一步。

Answer 2

iframe的來源是不同的文檔/ DOM。您可以在當前文檔中操作iframe，但不能操作iframe文檔的內容。你可以做的是在iframe文檔中創建一個參數化函數，並通過重新加載來自主文檔的iframe傳遞你的數據在查詢字符串/ URL上。

Answer 3

您在.find(...開始忘了ID（#）jQuery的前綴：

$("#preview").contents().find("#"+$(this).attr("id")).html($(this).val()); 

小提琴：http://jsfiddle.net/20h3xwsz/1/