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/