使用jQuery将textarea html内容更新为iframe(实时)

编码器

有没有一种方法可以使用jQuery将输入到文本区域的html内容传输到iframe?

我希望这是实时发生的。也就是说,当用户输入文本区域时,它会自动更新为iframe,而无需刷新页面吗?

我一直在寻找答案,但是似乎没有明确的方向,因此一段代码和说明对帮助我理解是非常有用的?

这似乎是一个很好的演练,说明如何做您想做的事。

这是其中内容的复制粘贴。作为参考,不仅仅依靠链接作为答案。

从页面访问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 () {
    $("#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();
    });
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章