关于javascript：动态创建具有给定HTML的iframe

Creating an iframe with given HTML dynamically

我正在尝试从JavaScript创建iframe并用任意HTML填充它，如下所示：

1
2
3

var html = '<body>Foo</body>';
var iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);

我希望iframe然后包含一个有效的窗口和文档。但是，事实并非如此：

> console.log(iframe.contentWindow);
null

自己尝试一下：http://jsfiddle.net/TrevorBurnham/9k9Pe/

我在俯视什么？

相关讨论

尽管您的src = encodeURI应该可以工作，但我会采取另一种方式：

1
2
3
4
5
6

var iframe = document.createElement('iframe');
var html = '<body>Foo</body>';
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();

由于这没有x域限制，并且完全通过iframe句柄完成，因此以后您可以访问和操纵帧的内容。您需要确定的是，已呈现了内容，该内容将(根据浏览器类型)在发出.write命令期间/之后开始-但在调用close()时不一定要做。

100％兼容的回调方法可以是这种方法：

1	<html><body onloadx="parent.myCallbackFunc(this.window)"></body></html>

但是，iframe具有onload事件。这是一种以DOM(js)形式访问内部html的方法：

1
2
3

iframe.onload = function() {
var div=iframe.contentWindow.document.getElementById('mydiv');
};

相关讨论

有趣;我以前没看过这种技术。我知道URI编码/解码会增加性能，但是我也认为它被描述为不支持srcdoc属性的环境中的唯一选择。 document.write方法是否有缺点？
我认为不是，这是我在浏览器兼容性方面可以提出的最向后兼容的解决方案。关于如何访问contentDocument有一个怪癖，但是我相信以上内容也可以在任何地方(IE也是如此)-好吧，document.bod可以添加，但是否则=)如果遇到安全限制，请将SRC设置为about：空白-由于不允许在x域上进行文档操作，如DOM中的其他操作一样
@mschr此方法是否支持完整的HTML页面代码，其中还包含了include和样式表？见stackoverflow.com/questions/19871886
基本上，是的，我认为应该，对此有不良评论。该技术基本上会打开一个inputtextstream，您可以通过document.write对其进行写入。反过来，正常的加载网页会通过websocket流对其进行检索。
这在Internet Explorer中有效！这很方便，因为在任何版本的IE中，数据URI都不能用作iframe源。 caniuse.com/#feat=datauri
不利的一面是，您不必将HTML转换为字符串，因此会丢失事件侦听器等。
嗨，尼克；好听者不会迷失，因为他们将得到重新解释。即foo实际上会触发onload事件。如果您复制不具有内联事件标记的现有html，则将使用。必须重新绑定绑定事件的javascript(读取：写入文档)。
此代码不适用于此简单的html var html = alert(1);
你确定？？只知道我成功地在chrome，IE和FF中测试了示例html。在.html文件中编写内联javascript时请务必小心-您需要分隔<和/ in结束标记。否则，某些浏览器会认为脚本到此结束(忽略连字符/引号)... var html = alert(1)<+/script>;
我使用Foo作为HTML，当我尝试使用document.getElementById("fooid")通过id检索div时，什么也没得到。知道为什么吗？
bugzilla.mozilla.org/show_bug.cgi?id=663406可能是一个错误浮出水面。尝试将脚本放在html文件中并将浏览器定向到其url？另外，在调用document.appendChild之前，确保要放入您要放入的内容
如何加载动态网址而不是静态HTML？
有没有一种方法可以禁止iFrame访问父页面？默认情况下，iFrame可以访问top。*并获得对父页面的完全访问权限。有办法将其沙箱化吗？
有趣的是，需要document.body.appendChild(iframe)才能起作用。
document.body.appendChild(iframe)被调用的那一刻，先前缓冲的html页面(在iframe.DOMDocument中，即它只是一堆链接列表元素-未呈现的html文本)被刷新到HTML呈现引擎中。某些浏览器还要求iframe元素为visible
仅供参考，iframe.contentWindow.document等效于iframe.contentDocument。看这里
抱歉，当您说必须确保内容已呈现时，我无法理解您的意思。您如何确定它已渲染？您还需要执行其他步骤来渲染它吗？您提供的代码不足以呈现内容吗？
知道为什么这样创建的iframe在克隆时会丢失其内容吗？似乎如果您克隆并iframe以这种方式写入的内容，则会在克隆上丢失。
小心，iframe.contentWindow在加载之前无法访问，即使应立即加载空的src。我建议使用：iframe.onload = function(){var d = this.contentWindow.document;d.open();d.write(hello world);d.close();};这样，您可以在甚至将动态创建的iframe添加到文档之前编写代码。

在将元素插入文档中之前，在javascript中设置新创建的iframe的src不会触发HTML解析器。然后更新HTML，将调用HTML解析器并按预期处理属性。

http://jsfiddle.net/9k9Pe/2/

1
2
3
4
5

var iframe = document.createElement('iframe');
var html = '<body>Foo</body>';
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);
console.log('iframe.contentWindow =', iframe.contentWindow);

同样，这个问题也回答了您，很重要的一点是，这种方法与某些浏览器存在兼容性问题，请参阅@mschr的跨浏览器解决方案。

相关讨论

感谢您提出的重大问题，这使我不知所措。使用dataURI HTML源时，我发现必须定义一个完整的HTML文档。

参见下面的修改示例。

1
2
3

var html = '<html><head></head><body>Foo</body></html>';
var iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);

注意用标签和iframe.src字符串包装的html内容。

需要将iframe元素添加到要解析的DOM树中。

1	document.body.appendChild(iframe);

除非您在浏览器上disable-web-security，否则您将无法检查iframe.contentDocument。
您会收到一条消息

DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin"http://localhost:7357" from accessing a cross-origin frame.

还有一种创建内容为HTML字符串的iframe的替代方法：srcdoc属性。较旧的浏览器不支持此功能(其中包括：Internet Explorer，可能还包括Safari？)，但此行为有一个polyfill，您可以在IE中添加条件注释，或使用has.js之类的条件来懒惰加载它。

相关讨论

做这个

1
2
3
4
5
6
7

...
var el = document.getElementById('targetFrame');

var frame_win = getIframeWindow(el);

console.log(frame_win);
...

getIframeWindow在这里定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29