Question

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

我希望这是实时发生的。即，当用户键入textarea时，它会自动更新为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();
    });
});

Answer 2

只需将2更改为@fjoe的解决方案，jQuery代码就可以100％工作。

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

更改

的参数

找到（“ #myHtmlDiv”）到找到（“ html”）



，然后将html（this）.val（））转换为 html（$（“＃myHtmlDiv”）。val（））

textarea html内容使用jQuery更新为iframe（实时）

2 个答案: