jQuery 用于在输入更改时更新 iFrame 内容的函数

Question

当更新具有相同 ID 的输入时，我正在尝试更新 iframe 的内容。

ID 为 "preview"

的 iframe 中的内容

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

有问题的输入框：

<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

iframe 的来源不同document/DOM。您可以在当前文档中操作 iframe，但不能操作 iframe 文档的内容。您可以做的是在 iframe 文档中创建一个参数化函数，然后通过在 querystring/URL.

上传入您的数据的主文档重新加载 iframe

Answer 2

在您的查找中，您只需输入要查找的 ID，而不要使用“#”来表示您正在查找一个 ID（与 class 或标签相比）。应该是这样的：

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

也许不是全部答案，但这至少是第一步。

Answer 3

您忘记了 .find(... 开头的 ID (#) 的 jQuery 前缀：

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

jQuery function to update iFrame content on input change