iframe 动态写入html,javascript - 动态创建给定HTML的iframe

javascript - 动态创建给定HTML的iframe

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

var html = '

Foo';

var iframe = document.createElement('iframe');

iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);

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

＆GT;的console.log(iframe.contentWindow);

空值

亲自试试：[http://jsfiddle.net/TrevorBurnham/9k9Pe/]

我在俯瞰什么？

5个解决方案

199 votes

虽然你的iframe应该可行，但我会采取不同的方式：

var iframe = document.createElement('iframe');

var html = '

Foo';

document.body.appendChild(iframe);

iframe.contentWindow.document.open();

iframe.contentWindow.document.write(html);

iframe.contentWindow.document.close();

由于这没有x域限制并且完全通过iframe句柄完成，因此您可以稍后访问和操作帧的内容。 所有你需要确保的是，内容已经被渲染，这将(根据浏览器类型)在发出.write命令期间/之后开始 - 但是在调用close()时不是必须完成的。

这种方法可以采用100％兼容的方式进行回调：

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

iframe.onload = function() {

var div=iframe.contentWindow.document.getElementById('mydiv');

};

mschr answered 2019-06-26T13:49:07Z

98 votes

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

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

var iframe = document.createElement('iframe');

var html = '

Foo';

iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);

document.body.appendChild(iframe);

console.log('iframe.contentWindow =', iframe.contentWindow);

这也回答了你的问题，重要的是要注意这种方法与某些浏览器存在兼容性问题，请参阅@mschr的答案，了解跨浏览器解决方案。

GillesC answered 2019-06-26T13:48:05Z

11 votes

谢谢你的好问题，这让我感到很沮丧。 使用dataURI HTML源代码时，我发现我必须定义一个完整的HTML文档。

请参阅下面的修改示例。

var html = '

Foo';

var iframe = document.createElement('iframe');

iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);

记下用iframe.contentDocument标签和disable-web-security字符串包装的html内容。

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

document.body.appendChild(iframe);

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

DOMException：无法读取＆＃39; contentDocument＆＃39; 属性来自＆＃39; HTMLIFrameElement＆＃39;：阻止具有原点＆＃34; [http：// localhost：7357＆＃34;]的帧访问跨源帧。

halfcube answered 2019-06-26T13:50:14Z

8 votes

还有一种方法可以创建一个iframe，其内容是HTML字符串：srcdoc属性。 旧版浏览器(主要是Internet Explorer，可能还有Safari？)不支持这种情况，但是这种行为有一个polyfill，你可以把它放在IE的条件注释中，或者使用像has.js这样的条件来有条件地懒惰 加载它。

zedd45 answered 2019-06-26T13:50:43Z

0 votes

做这个

...

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

var frame_win = getIframeWindow(el);

console.log(frame_win);

...

getIframeWindow在这里定义

function getIframeWindow(iframe_object) {

var doc;

if (iframe_object.contentWindow) {

return iframe_object.contentWindow;

}

if (iframe_object.window) {

return iframe_object.window;

}

if (!doc && iframe_object.contentDocument) {

doc = iframe_object.contentDocument;

}

if (!doc && iframe_object.document) {

doc = iframe_object.document;

}

if (doc && doc.defaultView) {

return doc.defaultView;

}

if (doc && doc.parentWindow) {

return doc.parentWindow;

}

return undefined;

}

Dominique Fortin answered 2019-06-26T13:51:22Z