动态创建具有给定HTML的iframe

小编典典

动态创建具有给定HTML的iframe

javascript

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

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）; 空值

我在俯视什么？

阅读 468

2020-05-01

共1个答案

小编典典

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

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

2020-05-01