如何将HTML内容设置为iframe
How to set HTML content into an iframe
我有一个HTML字符串
<html>
<body>Hello world</body>
</html>
我想用JavaScript将其设置为iframe。我正试图将HTML设置为这样:
contentWindow.document.body.innerHTML
或
contentDocument.body.innerHTML
或
document.body.innerHTML
但是IE给出了"访问被拒绝。"或"对象不支持此属性或方法。"或者"操作的最终元素无效。"错误。
这是我的完整代码:
<!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>
您可以使用:
document.getElementById('iframe1').contentWindow.document.write("<html><body>Hello world</body></html>");
这里有一个jsFiddle,它适用于所有主要的浏览器。
请注意,应该使用contentWindow.document.write
而不是contentDocument.write
:这使它在IE7中也能工作。
var htmlString="<body>Hello world</body>";
var myIFrame = document.getElementById('iframe1');
myIFrame.src="javascript:'"+htmlString+"'";
使用html5,您将能够使用srcdoc属性。
innerHTML
有点棘手,尤其是在IE中,像thead
这样的元素是只读的,会引起很多麻烦。
根据msdn上的文档,您可以尝试提供innerHTML
属性的documentMode
。
myIFrame = myIFrame.contentWindow ||
myIFrame.contentDocument.document ||
myIFrame.contentDocument;
myIFrame.document.open();
myIFrame.document.write('Your HTML Code');
myIFrame.document.close();
这可能只适用于IE。
- http://msdn.microsoft.com/en-us/library/ie/ms535862(v=vs.85(.aspx
- http://msdn.microsoft.com/en-us/library/ie/cc196988(v=vs.85(.aspx
- http://msdn.microsoft.com/en-us/library/ie/ms533897(v=vs.85(.aspx
2023中,这个问题的正确答案是使用<iframe>
元素的srcdoc
属性。我可以直接在您的HTML文件中完成,也可以使用javascript:
document.getElementById('iframe').srcdoc = "<html><body>Hello world!</body></html>";
document.documentElement.innerHTML
怎么样。但要知道,页面中的所有内容都将被替换,即使是执行该操作的脚本。
对于iframe,它将类似于myIFrame.contentWindow.document.documentElement.innerHTML
我对这里的答案"origin"有问题。这就是我的工作方式:
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();
试试看:
$('iframe').load(function() {
$(this).contents().find('body').append("Hello world");
});
更新:
$(function(){
$('iframe').load(function() {
$(this).contents().find('body').append("Hello world");
});
})
相关文章:
- 使用javascript设置iframe的高度
- 设置iFrame的高度
- 在页面上设置iframe
- jQuery/Javascript:从iframe内部设置iframe的边界
- 如何设置iframe以自动填充HTML中的空白正文空间
- 设置iframe marginheight=“;0”;通过javascript
- 如何在我的幻灯片上设置iframe视频
- 根据内容设置 iFrame 宽度和高度
- Android WebView:设置 iframe src 会重定向页面
- JQuery根据iframe源设置iframe高度
- 在跨域环境中设置IFRAME的高度和宽度
- 如何设置iframe在使用jQuery加载完成后自动平滑滚动到底部
- 基于内容使用Javascript设置iframe高度
- 根据iFrame的内容设置iFrame高度
- 如何设置iframe内容的高度和宽度
- 动态设置iframe高度;不处理ie和chrome
- 如何设置iframe's在firefox扩展对话框中的src
- 设置iframe's window.external成员通过javascript
- 如何根据内容设置iframe的高度
- 设置iFrame src属性为编码的数据URI与javascript在chrome