获取iframe的文档对象

时间:2021-06-03 15:55:31

I'm trying to get the document object of an iframe, but none of the examples I've googled seem to help. My code looks like this:

我正在尝试获取iframe的文档对象,但我用Google搜索的示例似乎都没有帮助。我的代码如下所示:

<html>
    <head>
        <script>
            function myFunc(){
                alert("I'm getting this far");
                var doc=document.getElementById("frame").document;
                alert("document is undefined: "+doc);
            }
        </script>
    </head>
    <body>
        <iframe src="http://www.google.com/ncr" id="frame" width="100%" height="100%" onload="myFync()"></iframe>
    </body>
</html>

I have tested that I am able to obtain the iframe object, but .document doesn't work, neither does .contentDocument and I think I've tested some other options too, but all of them return undefined, even examples that are supposed to have worked but they don't work for me. So I already have the iframe object, now all I want is it's document object. I have tested this on Firefox and Chrome to no avail.

我已经测试过我能够获取iframe对象,但是.document不起作用,.contentDocument和我认为我也测试了一些其他选项,但是所有这些都返回undefined,甚至是应该的示例已经工作,但他们不适合我。所以我已经拥有了iframe对象,现在我想要的只是它的文档对象。我在Firefox和Chrome上测试过这个无济于事。

3 个解决方案

#1


63  

Try the following

请尝试以下方法

var doc=document.getElementById("frame").contentDocument;

// Earlier versions of IE or IE8+ where !DOCTYPE is not specified
var doc=document.getElementById("frame").contentWindow.document;

Note: AndyE pointed out that contentWindow is supported by all major browsers so this may be the best way to go.

注意:AndyE指出所有主流浏览器都支持contentWindow,因此这可能是最好的方法。

Note2: In this sample you won't be able to access the document via any means. The reason is you can't access the document of an iframe with a different origin because it violates the "Same Origin" security policy

注意2:在此示例中,您将无法通过任何方式访问该文档。原因是您无法访问具有不同来源的iframe文档,因为它违反了“同源”安全策略

#2


6  

This is the code I use:

这是我使用的代码:

var ifrm = document.getElementById('myFrame');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();

contentWindow vs. contentDocument

contentWindow与contentDocument

  • IE (Win) and Mozilla (1.7) will return the window object inside the iframe with oIFrame.contentWindow.
  • IE(Win)和Mozilla(1.7)将使用oIFrame.contentWindow返回iframe内的窗口对象。
  • Safari (1.2.4) doesn't understand that property, but does have oIframe.contentDocument, which points to the document object inside the iframe.
  • Safari(1.2.4)不了解该属性,但确实有oIframe.contentDocument,它指向iframe内的文档对象。
  • To make it even more complicated, Opera 7 uses oIframe.contentDocument, but it points to the window object of the iframe. Because Safari has no way to directly access the window object of an iframe element via standard DOM (or does it?), our fully modern-cross-browser-compatible code will only be able to access the document within the iframe.
  • 为了使其更复杂,Opera 7使用oIframe.contentDocument,但它指向iframe的window对象。因为Safari无法通过标准DOM直接访问iframe元素的window对象(或者它是什么?),我们完全现代的跨浏览器兼容的代码只能访问iframe中的文档。

#3


5  

For even more robustness:

为了更强大:

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

and

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

getIframeWindow(el).targetFunction();
...

#1


63  

Try the following

请尝试以下方法

var doc=document.getElementById("frame").contentDocument;

// Earlier versions of IE or IE8+ where !DOCTYPE is not specified
var doc=document.getElementById("frame").contentWindow.document;

Note: AndyE pointed out that contentWindow is supported by all major browsers so this may be the best way to go.

注意:AndyE指出所有主流浏览器都支持contentWindow,因此这可能是最好的方法。

Note2: In this sample you won't be able to access the document via any means. The reason is you can't access the document of an iframe with a different origin because it violates the "Same Origin" security policy

注意2:在此示例中,您将无法通过任何方式访问该文档。原因是您无法访问具有不同来源的iframe文档,因为它违反了“同源”安全策略

#2


6  

This is the code I use:

这是我使用的代码:

var ifrm = document.getElementById('myFrame');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();

contentWindow vs. contentDocument

contentWindow与contentDocument

  • IE (Win) and Mozilla (1.7) will return the window object inside the iframe with oIFrame.contentWindow.
  • IE(Win)和Mozilla(1.7)将使用oIFrame.contentWindow返回iframe内的窗口对象。
  • Safari (1.2.4) doesn't understand that property, but does have oIframe.contentDocument, which points to the document object inside the iframe.
  • Safari(1.2.4)不了解该属性,但确实有oIframe.contentDocument,它指向iframe内的文档对象。
  • To make it even more complicated, Opera 7 uses oIframe.contentDocument, but it points to the window object of the iframe. Because Safari has no way to directly access the window object of an iframe element via standard DOM (or does it?), our fully modern-cross-browser-compatible code will only be able to access the document within the iframe.
  • 为了使其更复杂,Opera 7使用oIframe.contentDocument,但它指向iframe的window对象。因为Safari无法通过标准DOM直接访问iframe元素的window对象(或者它是什么?),我们完全现代的跨浏览器兼容的代码只能访问iframe中的文档。

#3


5  

For even more robustness:

为了更强大:

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

and

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

getIframeWindow(el).targetFunction();
...