如何将 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.write
you 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 innerHTML
is a bit tricky especially in IE, where elements like thead
are read-only and cause a lot of trouble.
这innerHTML
有点棘手,尤其是在 IE 中,其中诸如thead
只读之类的元素会导致很多麻烦。
Based on the documentation on msdn you might try documentMode
which provides a innerHTML
property.
根据 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");
});
})