jquery - 使用 jQuery 将 textarea html 内容更新到 iframe(实时)

Question

有没有办法可以使用 jQuery 将输入文本区域的 html 内容传输到 iframe？

我希望这能够实时发生。即当用户在文本区域中输入内容时，它会自动更新到 iframe，而不需要刷新页面？

我一直在寻找这个问题的答案，但似乎没有明确的方向，所以一段代码和解释会很好地帮助我理解？

Answer 1

这似乎是一个不错的walk-through如何做你想做的事。

这是那里内容的复制粘贴。作为引用，不要仅依赖链接作为答案。

从您的页面访问 iframe:

var ifrm = window.frameElement; // reference to iframe element container
var doc = ifrm.ownerDocument; // reference to container's document
var form = doc.forms[0]; // reference to first form in container document

jQuery 版本:

$("#myiframe").contents().find("#myForm");

从 iframe 访问父级:

// reference to first form in parent document
var form = parent.document.forms[0];
// or, using form id instead
var form = parent.document.getElementById('myForm');

jQuery 版本:

$('#myForm', window.parent.document).html();

对此有一个警告XSS :这基本上意味着只有当站点域和 iframe 域相同时您才能执行这些操作。

对此有一些解决方法:如果您使用 Web 服务器获取另一个域的内容并将其作为您自己的服务器，那么浏览器将不会提示 XSS。

要直接回答您的问题，下面的 jQuery 应该使用 jQuery contents function 从父页面运行。 (请参阅页面上的最后一个演示):

$(function () {
    $("#myTextArea").on("change keyup paste", function () {
        $("#myiframe").contents().find("html").html($("#myHtmlDiv").val());
    });
});

我已经更新了上面的 jQuery 示例，所以它现在应该可以工作了，但如果不能的话，这里有一个经过测试的 JavaScript 方法似乎可以解决问题:

$(function () {
    $("#myTextArea").on("change keyup paste", function () {
        var doc = document.getElementById("myiframe").contentWindow.document;
        doc.open();
        doc.write($(this).val());
        doc.close();
    });
});