我正在创建一个浏览器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" />
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
答案 0 :(得分: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>
答案 1 :(得分:11)
您可以使用jquery
在一行中完成所有操作$("iframe").contents().find('html').html("Your new HTML");
在此处查看工作演示http://jsfiddle.net/dWpvf/972/
将“iframe”替换为“#render”作为示例。我离开了“iframe”,以便其他用户可以参考答案。
答案 2 :(得分:2)
尝试
iframe[0].documentElement.innerHTML = code;
假设iframe的网址来自与网页相同的网址。
答案 3 :(得分:-1)
设置document.designMode属性,然后尝试添加HTML。