动态创建具有给定 HTML 的 iframe

小编典典

动态创建具有给定 HTML 的 iframe

all

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

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

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

控制台.log(iframe.contentWindow);
无效的

自己试试吧：http:
//jsfiddle.net/TrevorBurnham/9k9Pe/

我在看什么？

阅读 187

2022-08-08

共1个答案

小编典典

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

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

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 的答案以获得跨浏览器解决方案。

2022-08-08