jQuery 将 HTML 插入 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1565822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Insert HTML into iframe
提问by RailsSon
I am creating a in browser HTML editor. I am using the syntax highlighter called Code Mirror which is very good.
我正在创建一个浏览器 HTML 编辑器。我正在使用名为 Code Mirror 的语法荧光笔，它非常好。
My setup is an iframe that holds a view of the page which is being edited and a textarea which the plain text HTML sits which the user edits.
我的设置是一个 iframe，它包含正在编辑的页面的视图和一个文本区域，纯文本 HTML 位于用户编辑的位置。
I am trying to insert the edited HTML from the textarea into the iframe which displays they rendered HTML.
我试图将编辑过的 HTML 从 textarea 插入到 iframe 中，该 iframe 显示它们呈现的 HTML。
Is this possible? I have tried the following:
这可能吗？我尝试了以下方法：
HTML setup:
HTML设置：
<iframe id="render">
</iframe>
<textarea id="code">
HTML WILL BE
HERE
</textarea>
<input type="submit" id="edit_button" value="Edit" />
JQuery Setup:
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)
})
This does not seem to load the HTML into the iframe, is there a special method to insert HTML into a iframe or is this not possible?
这似乎没有将 HTML 加载到 iframe 中，是否有一种特殊的方法可以将 HTML 插入到 iframe 中，或者这是不可能的？
采纳答案by rahul
Set the document.designModeproperty and then try adding the HTML.
设置document.designMode属性，然后尝试添加 HTML。
See also: Rich-Text Editing in Mozilla
另请参阅：Mozilla 中的富文本编辑
回答by OpenCode
This problem bugged me too and finally found solution.
这个问题也困扰着我，终于找到了解决方案。
Its late but will add value to other visitors who might need proper fix.
它晚了，但会为可能需要适当修复的其他访问者增加价值。
<!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>
回答by Justin Levene
You can do it all on one line with jquery
您可以使用 jquery 在一行中完成所有操作
$("iframe").contents().find('html').html("Your new HTML");
See working demo here http://jsfiddle.net/dWpvf/972/
在此处查看工作演示http://jsfiddle.net/dWpvf/972/
Replace "iframe" with "#render" for your example. I left in "iframe" so that other users can reference the answer.
对于您的示例，将“iframe”替换为“#render”。我留在“iframe”中，以便其他用户可以参考答案。
回答by Marius
try
尝试
iframe[0].documentElement.innerHTML = code;
Assuming that the url to the iframe is from the same domain as the webpage.
假设 iframe 的 url 来自与网页相同的域。
