如何将 HTML 内容设置为 iframe
Posted
技术标签:
【中文标题】如何将 HTML 内容设置为 iframe【英文标题】：How to set HTML content into an iframe 【发布时间】：2013-05-06 11:16:09 【问题描述】：我有一个 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>
【问题讨论】：
为什么你不加载一个页面它工作得很好？为什么要使用字符串来加载？告诉我 【参考方案1】：你可以使用：
document.getElementById('iframe1').contentWindow.document.write("<html><body>Hello world</body></html>");
这是一个jsFiddle，适用于所有主流浏览器。
请注意，您应该使用contentWindow.document.write 而不是contentDocument.write：这使它在IE7 中也能正常工作。
【讨论】：
注意，如果是读写iframe，需要写document.getElementById('iframe1').contentWindow.document.write("正文>");像这样读取空字符串 var iframe_html = document.getElementById('iframe_exe_uploader').contentWindow.document.body.innerHTML; 我需要使用 open/close 让它在 chrome 中工作：iframe.contentWindow.document.open('text/htmlreplace'); iframe.contentWindow.document.write(内容); iframe.contentWindow.document.close(); 如果不想追加，可以使用document.getElementById('output_iframe1').src = "data:text/html;charset=utf-8," + escape(html_string);(source)。【参考方案2】：
var htmlString="<body>Hello world</body>";
var myIFrame = document.getElementById('iframe1');
myIFrame.src="javascript:'"+htmlString+"'";
使用 html5，您将能够使用 srcdoc attribute。
【讨论】：
【参考方案3】：innerHTML 有点棘手，尤其是在 IE 中，其中像 thead 这样的元素是只读的，会造成很多麻烦。
根据 msdn 上的文档，您可以尝试 documentMode，它提供了一个 innerHTML 属性。
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【讨论】：
【参考方案4】：我对此处的答案的“起源”有疑问。这就是它对我的工作方式：
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();
【讨论】：
【参考方案5】：document.documentElement.innerHTML 怎么样。但请注意，即使执行此操作的脚本也会替换页面中的所有内容。
对于 iframe，它会像这样 myIFrame.contentWindow.document.documentElement.innerHTML
【讨论】：
感谢您的回答，但如果我使用此代码，即说此错误：“操作的最终元素无效。”【参考方案6】：试试看：
$('iframe').load(function()
$(this).contents().find('body').append("Hello world");
);
更新：
$(function()
$('iframe').load(function()
$(this).contents().find('body').append("Hello world");
);
)
【讨论】：
以上是关于如何将 HTML 内容设置为 iframe的主要内容，如果未能解决你的问题，请参考以下文章
如何在HTML / CSS中为页面上的所有内容设置边框/边距？
用jacob将Word转换为HTML后如何设置HTML里面的所有东西居中