如何将 HTML 内容设置为 iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16504816/
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
How to set HTML content into an iframe
提问by mr.boyfox
I have a HTML string
我有一个 HTML 字符串
<html>
<body>Hello world</body>
</html>
and I want to set it to an iframe with JavaScript. I am trying to set the HTML like this:
我想用 JavaScript 将它设置为 iframe。我正在尝试像这样设置 HTML：
contentWindow.document.body.innerHTML
or
或者
contentDocument.body.innerHTML
or
或者
document.body.innerHTML
but IE gives "Access is denied." or "Object does not support this property or method." or "Invalid final element to the action." errors.
但 IE 显示“访问被拒绝”。或“对象不支持此属性或方法。” 或“操作的最终元素无效。” 错误。
Here is my full code:
这是我的完整代码：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery_1.7.0.min.js"/>
<script type="text/javascript">
$(document).ready(function(){
var htmlString = "<html><body>Hello world</body></html>";
var myIFrame = document.getElementById('iframe1');
// open needed line commentary
//myIFrame.contentWindow.document.body.innerHTML = htmlString;
//myIFrame.contentDocument.body.innerHTML = htmlString;
//myIFrame.document.body.innerHTML = htmlString;
//myIFrame.contentWindow.document.documentElement.innerHTML = htmlString;
});
</script>
</head>
<body>
<p>This is iframe:
<br>
<iframe id="iframe1">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
回答by Mathijs Flietstra
You could use:
你可以使用：
document.getElementById('iframe1').contentWindow.document.write("<html><body>Hello world</body></html>");
Here's a jsFiddle, which works in all major browsers.
这是一个jsFiddle，它适用于所有主要浏览器。
Note that instead of contentDocument.writeyou should use contentWindow.document.write: this makes it work in IE7 as well.
请注意，contentDocument.write您不应该使用contentWindow.document.write: 这使得它也可以在 IE7 中使用。
回答by Christophe
var htmlString="<body>Hello world</body>";
var myIFrame = document.getElementById('iframe1');
myIFrame.src="javascript:'"+htmlString+"'";
With html5 you'll be able to use the srcdoc attribute.
使用 html5，您将能够使用srcdoc 属性。
回答by MatthiasLaug
The innerHTMLis a bit tricky especially in IE, where elements like theadare read-only and cause a lot of trouble.
这innerHTML有点棘手，尤其是在 IE 中，其中诸如thead只读之类的元素会导致很多麻烦。
Based on the documentation on msdn you might try documentModewhich provides a innerHTMLproperty.
根据 msdn 上的文档，您可以尝试documentMode提供一个innerHTML属性。
myIFrame = myIFrame.contentWindow ||
myIFrame.contentDocument.document ||
myIFrame.contentDocument;
myIFrame.document.open();
myIFrame.document.write('Your HTML Code');
myIFrame.document.close();
this might only work in IE.
这可能只适用于 IE。
回答by OriEng
I have a problem with 'origin' with the answers here. This is how it's work for me:
我对这里的答案的“起源”有疑问。这就是它对我的工作方式：
const frame1 = document.createElement('iframe');
frame1.name = 'frame1';
//not have to set this style,just for demo
frame1.style.position = 'absolute';
frame1.style.height = '800px';
frame1.style.top = '100px';
frame1.style.left = '100px';
frame1.style.background = 'white';
document.body.appendChild(frame1);
const frameDoc =
frame1.contentWindow || frame1.contentDocument.document ||
frame1.contentDocument;
frameDoc.document.write('<html><head><title></title><body>Hello world</body></html>');
frameDoc.document.close();
回答by user568109
How about document.documentElement.innerHTML. But do know that everything in the page will be replaced even the script that does that.
怎么样document.documentElement.innerHTML。但是要知道页面中的所有内容都将被替换，即使是执行此操作的脚本。
For an iframe it would be like this myIFrame.contentWindow.document.documentElement.innerHTML
对于 iframe，它会是这样的 myIFrame.contentWindow.document.documentElement.innerHTML
回答by Binhvi
try it:
尝试一下：
$('iframe').load(function() {
$(this).contents().find('body').append("Hello world");
});
update:
更新：
$(function(){
$('iframe').load(function() {
$(this).contents().find('body').append("Hello world");
});
})
