如何设置HTML内容到iframe

我有一个HTML字符串如何设置HTML内容到iframe

<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>

来源

2013-05-12 mr.boyfox

为什么不加载一个页面，它工作得很好？为什么你想使用一个字符串来加载？让我知道 – 2013-05-15 05:13:12

你可以使用：

document.getElementById('iframe1').contentWindow.document.write("<html><body>Hello world</body></html>");

这里有一个jsFiddle，这在所有主要的浏览器上运行。

请注意，而不是contentDocument.write您应该使用contentWindow.document.write：这使得它也可以在IE7中工作。

来源

2013-05-15 05:51:08

感谢编辑@ user1846192 – 2013-05-15 06:23:40

请注意，如果您正在读写iframe内存，您需要写的document.getElementById（ 'iframe1'）contentWindow.document.write（ “”）;。具有空字符串读取这样变种iframe_html =的document.getElementById（ 'iframe_exe_uploader'）contentWindow.document.body。 .innerHTML; – 2015-01-06 00:31:29

我需要使用开/关得到它在铬工作： iframe.contentWindow.document.open（ '文/ htmlreplace'）; iframe.contentWindow.document.write（内容） ; iframe.contentWindow.document.close（）; – Henry 2015-03-04 00:38:11

如何document.documentElement.innerHTML。但是要知道，即使是那个脚本，页面中的所有内容都将被替换。

在iFrame它会是这样myIFrame.contentWindow.document.documentElement.innerHTML

来源

2013-05-12 06:49:24 user568109

感谢您的答案，但如果我使用此代码，即说这个错误：“无效的行动最终要素。“ – 2013-05-12 16:04:36

的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。

来源

2013-05-15 05:26:04 MatthiasLaug

试试这个新的解决方案，我添加了一些进一步的检查 – MatthiasLaug 2013-05-15 05:52:37

感谢您的编辑，但我已经接受了@ user1846192的回答 – 2013-05-15 06:05:40

-2

尝试：

$('iframe').load(function() { 
    $(this).contents().find('body').append("Hello world"); 
});

更新：

$(function(){ 
    $('iframe').load(function() { 
     $(this).contents().find('body').append("Hello world"); 
    }); 
})

来源

2013-05-15 05:52:21 Binhvi

这是行不通的 – 2013-05-15 05:58:03

var htmlString="<body>Hello world</body>"; 
var myIFrame = document.getElementById('iframe1'); 
myIFrame.src="javascript:'"+htmlString+"'";

使用HTML5，你就可以使用srcdoc attribute。

来源

2013-05-15 17:39:03 Christophe

@ mr.boyfox更正，我已经忘了周围的HTML字符串引号。这应该在IE7和IE8中工作。 – Christophe 2013-05-16 05:25:21

是的！现在可以正常工作，谢谢@Christophe！ – 2013-05-16 05:46:34

如何设置HTML内容到iframe

回答

相关问题