将HTML插入iframe

Question

将HTML插入iframe

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

我的设置是一个iframe,它包含正在编辑的页面视图和用户编辑的纯文本HTML所在的文本区域.

我试图将编辑后的HTML从textarea插入到iframe中,显示它们呈现HTML.

这可能吗？我尝试过以下方法:

HTML设置:

<iframe id="render">

</iframe>

<textarea id="code">
HTML WILL BE 

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

Run Code Online (Sandbox Code Playgroud)

JQuery设置:

$('#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)
})

Run Code Online (Sandbox Code Playgroud)

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

干杯

EEF

Answer 1

Ope*_*ode 28

这个问题也让我烦恼,终于找到了解决方案.

它的晚期但会为可能需要适当修复的其他访客增加价值.

    <!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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Jus*_*ene 11

您可以使用jquery在一行中完成所有操作

$("iframe").contents().find('html').html("Your new HTML");

Run Code Online (Sandbox Code Playgroud)

在这里查看工作演示http://jsfiddle.net/dWpvf/972/

将"iframe"替换为"#render"作为示例.我离开了"iframe",以便其他用户可以参考答案.

Answer 3

rah*_*hul -4

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

另请参阅：Mozilla 中的富文本编辑

归档时间：	16 年，2 月前
查看次数：	39161 次
最近记录：	6 年，8 月前