我创建一个在浏览器的HTML编辑器。 我使用称为代码镜像语法高亮显示这是非常好的。
我的设置是保持正被编辑的页面和该纯文本的HTML位于其中用户的编辑一个textarea的视图iframe中。
我试图从文本区域的编辑HTML插入其中显示他们呈现的HTML内嵌框架。
这可能吗？ 我曾尝试以下：
HTML设置：
<iframe id="render">
</iframe>
<textarea id="code">
HTML WILL BE
HERE
</textarea>
<input type="submit" id="edit_button" value="Edit" />
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)
})
这似乎并不为HTML加载到iframe中，是否有插入HTML成iframe的特殊方法，或者这是不可能的？
干杯
EEF
设置document.designMode属性，然后尝试添加HTML。
参见： 在Mozilla富文本编辑
这个问题窃听我也终于找到解决办法。
它的晚，但会增加价值，谁可能需要适当的修复其他游客。
<!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>
你可以做所有的使用jQuery一行
$("iframe").contents().find('html').html("Your new HTML");
看到这里工作演示http://jsfiddle.net/dWpvf/972/
替换“IFRAME”与“#render”你的例子。 我留在“IFRAME”，使其他用户可参考答案。
尝试
iframe[0].documentElement.innerHTML = code;
假设URL的iframe是从同一个域中的网页。
