首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >将HTML插入iframe

将HTML插入iframe
EN

Stack Overflow用户
提问于 2009-10-14 12:01:35
回答 4查看 46.8K关注 0票数 22

我正在创建一个浏览器中的HTML编辑器。我正在使用名为Code Mirror的语法高亮笔,它非常好用。

我的设置是一个iframe,它包含正在编辑的页面的视图和一个文本区域,用户可以在文本区域中使用纯文本HTML进行编辑。

我正在尝试将编辑后的HTML从文本区域插入到iframe中,它显示了它们呈现的HTML。

这个是可能的吗?我尝试过以下几种方法:

HTML设置:

代码语言:javascript
复制
<iframe id="render">

</iframe>

<textarea id="code">
HTML WILL BE 

HERE
</textarea>
<input type="submit" id="edit_button" value="Edit" />

JQuery设置:

代码语言:javascript
复制
$('#edit_button').click(function(){
    var code = editor.getCode(); // editor.getCode() is a codemirror function which gets the HTML from the text area
    var iframe = $('#render');
    iframe.html(code)
})

这似乎没有将HTML加载到iframe中,有没有特殊的方法可以将HTML插入到iframe中,或者这是不可能的?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2009-10-14 12:05:41

设置document.designMode属性,然后尝试添加HTML。

另请参阅:Rich-Text Editing in Mozilla

票数 -3
EN

Stack Overflow用户

发布于 2011-02-14 01:00:20

这个问题也困扰着我,最终找到了解决方案。

虽然为时已晚,但它将为其他可能需要适当修复的访问者增加价值。

代码语言:javascript
复制
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <title>Iframe test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(function() {
            var $frame = $('<iframe style="width:200px; height:100px;">');
            $('body').html( $frame );
            setTimeout( function() {
                var doc = $frame[0].contentWindow.document;
                var $body = $('body',doc);
                $body.html('<h1>Test</h1>');
            }, 1 );
        });
    </script>
</head>
<body>
</body>
</html>
票数 29
EN

Stack Overflow用户

发布于 2015-02-28 00:43:26

您可以使用jquery在一行中完成所有这些工作

代码语言:javascript
复制
$("iframe").contents().find('html').html("Your new HTML");

请在此处查看工作演示http://jsfiddle.net/dWpvf/972/

将示例中的"iframe“替换为"#render”。我留在了"iframe“中,以便其他用户可以参考答案。

票数 14
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1565822

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档