使用给定的 HTML 动态创建 iframe

javascript iframe

2022-08-30 01:51:10

我正在尝试从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）;
零

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

我忽略了什么？

答案 1

虽然你应该工作，但我会走一条不同的路：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域限制，并且完全通过句柄完成，因此您可以稍后访问和操作框架的内容。您需要确保的是，内容已经呈现，这将（取决于浏览器类型）在发出.write命令期间/之后开始 - 但在调用时不必完成。iframeclose()

执行回调的 100% 兼容方式可以是以下方法：

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

但是，iframes 具有 onload 事件。以下是以 DOM （js）身份访问内部 html 的方法：

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

答案 2

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

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