Question

I m trying to create an iframe from JavaScript and fill it with arbitrary HTML, like so:

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);
null

http://jsfiddle.net/TrevorBurnham/9k9Pe/>http://jsfiddle.net/TrevorBurnham/9k9Pe/

我所期待的是什么?

Answer 1

规定新设立的<代码>iframe在javascript中不触发“超文本”一词,直到该要素被插入文件。然后更新了超文本,将援引超文本帽,按预期处理属性。

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

如果您的<代码>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-omain的束缚,而且完全通过<条码>iframe处理,你可以在晚些时候查阅和操纵框架的内容。你们都需要保证的是,内容已经提供,将(视浏览器类型而定)从发布指挥的期间/之后开始——但<>> /em>在发出<条码>时不曾做过。

采用100%的对应办法可以采用这种办法:

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

然而,机组有上载活动。这里是利用内部的html作为OM(js):

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

Answer 3

我知道这是一个老的问题,但我认为,我会提供使用<条码>的示例,因为现在这个词是

利用 srcdocvide, 您可提供在线超文本,以插入。如果得到支持,则优先于<代码>src。浏览器如果得不到支持,将回落到<条码><>>>。

我也建议使用sand Box因属性而对框架内容施加额外限制。如果超文本不属你本人,这一点尤其重要。

const iframe = document.createElement( iframe );
const html =  <body>Foo</body> ;
iframe.srcdoc = html;
iframe.sandbox =   ;
document.body.appendChild(iframe);

如果你需要支持老的浏览器,你可以核对<条码>弧度/代码>的支持,并从其他答复中退回到另一种方法。

function setIframeHTML(iframe, html) {
  if (typeof iframe.srcdoc !==  undefined ) {
    iframe.srcdoc = html;
  } else {
    iframe.sandbox =  allow-same-origin ;
    iframe.contentWindow.document.open();
    iframe.contentWindow.document.write(html);
    iframe.contentWindow.document.close();
  }
}

var iframe = document.createElement( iframe );
iframe.sandbox =   ;
var html =  <body>Foo</body> ;

document.body.appendChild(iframe);
setIframeHTML(iframe, html);

Answer 4

由于你的伟大问题,这已使我陷入了几处困境。在使用URI超文本来源数据时,我认为我必须确定一份完整的超文本文件。

下面是经修改的例子。

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>、 tags和iframe.src string的html内容。

必须将iframe元素添加到DOM树上。

document.body.appendChild(iframe);

You will not be able to inspect the iframe.contentDocument unless you disable-web-security on your browser. You ll get a message

DOM 例外:没有读到超文本IFrameElement的内容文件: http:// localhost:7357” http:// localhost:7357。

Answer 5

还有一个选择,即建立一个框架,其内容是显示超文本:。老年人的浏览器没有支持这一系统(主要有:? 但有 polypple ,你可以向国际电子计算机协会提出有条件的评论,也可以使用类似内容。 j 有条件装载。

Answer 6

URL办法只能用于小型的超文本处理。更为坚实的办法是,从一场博览中产生一种URL的物体,并将其用作动态框架的来源。

const html =  <html>...</html> ;
const iframe = document.createElement( iframe );
const blob = new Blob([html], {type:  text/html });
iframe.src = window.URL.createObjectURL(blob);
document.body.appendChild(iframe);

Answer 7

......

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

var frame_win = getIframeWindow(el);

console.log(frame_win);
...

<>>>>> 此处定义的“植被”

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

Answer 8

(职能)-1

var frame = document.createElement( iframe );
frame.src =  https://1zr2h9xgfxqt.statuspage.io/embed/frame ;
frame.style.position =  fixed ;
frame.style.border =  none ;
frame.style.boxShadow =  0 20px 32px -8px rgba(9,20,66,0.25) ;
frame.style.zIndex =  9999 ;
frame.style.transition =  left 1s ease, bottom 1s ease, right 1s ease ;

var mobile;
if (mobile = screen.width < 450) {
  frame.src +=  ?mobile=true ;
  frame.style.height =  20vh ;
  frame.style.width =  100vw ;
  frame.style.left =  -9999px ;
  frame.style.bottom =  -9999px ;
  frame.style.transition =  bottom 1s ease ;
} else {
  frame.style.height =  115px ;
  frame.style.width =  320px ;
  frame.style.left =  auto ;
  frame.style.right =  -9999px ;
  frame.style.bottom =  60px ;
}

document.body.appendChild(frame);

var actions = {
  showFrame: function() {
    if (mobile) {
      frame.style.left =  0 ;
      frame.style.bottom =  0 ;
    }
    else {
      frame.style.left =  auto ;
      frame.style.right =  60px 
    }
  },
  dismissFrame: function(){
    frame.style.left =  -9999px ;
  }
}

window.addEventListener( message , function(event){
  if (event.data.action && actions.hasOwnProperty(event.data.action)) {
    actions[event.data.action](event.data);
  }
}, false);

window.statusEmbedTest = actions.showFrame;

(iii)

友情链接