创建具有给定的HTML一个iframe动态创建具有给定的HTML一个iframe动态(Creatin

我想从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/

我是什么俯瞰？

Answer 1:

设置src新创建的iframe的JavaScript，直到元素被插入到文档中不会触发HTML解析器。然后，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的答案一个跨浏览器的解决方案。

Answer 2:

Allthough您的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命令发出- 但是当不nescessarily完成close()被调用。

做一个回调可能是这种方法的100％兼容的方式：

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

I帧有onload事件，但是。这里是访问内HTML作为DOM（JS）的方法：

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

Answer 3:

感谢您的大问题，这已经赶上我出去了几次。当使用dataURI HTML源代码，我发现我必须定义一个完整的HTML文档。

见的变形例下面。

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

注意到包裹着的HTML内容的<html>标记和iframe.src字符串。

iframe元素需要被添加到DOM树被解析。

document.body.appendChild(iframe);

您将无法检查iframe.contentDocument除非你disable-web-security浏览器。你会得到一个消息

抛出：DOMException：未能读取从“HTMLIFrameElement”的“contentDocument”属性：被阻止与原点的帧“ HTTP：//本地主机：7357 ”访问的横原点帧。

Answer 4:

没有用于创建一个iframe，其内容是HTML的字符串替代：在srcdoc属性。这是不支持旧版浏览器（其中主要是： Internet Explorer和Safari浏览器有可能？），但有一个填充工具对于这种行为，你可以把在有条件的意见为IE浏览器，或使用类似has.js有条件地懒加载它。

Answer 5:

做这个

...
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;
}

文章来源: Creating an iframe with given HTML dynamically