如何动态创建给定HTML的iframe？
如何动态创建给定HTML的iframe？
提问于 2018-04-02 04:17:23
试图从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）; 空值
回答 2
Stack Overflow用户
发布于 2018-04-02 13:08:04
在元素插入到文档中之前，设置JavaScript中src新创建iframe的JavaScript不会触发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);
注意，这种方法与一些浏览器有兼容性问题。
Stack Overflow用户
发布于 2018-04-02 13:32:39
尽管src = encodeURI应该工作，如果采取不同的方式：
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％兼容方式可以是这种方法：
<html><body onload="parent.myCallbackFunc(this.window)"></body></html>
但是，iframe具有onload事件。这是一种以DOM（js）的形式访问内部html的方法：
iframe.onload = function() {
var div=iframe.contentWindow.document.getElementById('mydiv');
};
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100003761
复制相关文章
相似问题
腾讯云开发者
