从主文档中的 JavaScript 获取 IFrame 的文档

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3999101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 07:04:59  来源:igfitidea点击:

Get IFrame's document, from JavaScript in main document

javascripthtmliframedocument

提问by user175908

I have this HTML code:

我有这个 HTML 代码:

<html>
  <head>
    <script type="text/javascript">
      function GetDoc(x)
      {
        return x.document ||
          x.contentDocument ||
          x.contentWindow.document;
      }

      function DoStuff()
      {
        var fr = document.all["myframe"];
        while(fr.ariaBusy) { }
        var doc = GetDoc(fr);
        if (doc == document)
          alert("Bad");
        else 
          alert("Good");
      }
    </script>
  </head>
  <body>
    <iframe id="myframe" src="http://example.com" width="100%" height="100%" onload="DoStuff()"></iframe>
  </body>
</html>

The problem is that I get message "Bad". That mean that the document of iframe is not got correctly, and what is actualy returned by GetDoc function is the parent document.

问题是我收到消息“坏”。这意味着iframe的文档没有正确获取,GetDoc函数实际返回的是父文档。

I would be thankful, if you told where I do my mistake. (I want to get document hosted in IFrame.)

如果你告诉我哪里出错了,我将不胜感激。(我想在 IFrame 中托管文档。)

Thank you.

谢谢你。

回答by pkaeding

You should be able to access the document in the IFRAME using the following code:

您应该能够使用以下代码访问 IFRAME 中的文档:

document.getElementById('myframe').contentWindow.document

However, you will not be able to do this if the page in the frame is loaded from a different domain (such as google.com). THis is because of the browser's Same Origin Policy.

但是,如果框架中的页面是从不同的域(例如 google.com)加载的,您将无法执行此操作。这是因为浏览器的同源策略

回答by Tim Down

The problem is that in IE (which is what I presume you're testing in), the <iframe>element has a documentproperty that refers to the document containing the iframe, and this is getting used before the contentDocumentor contentWindow.documentproperties. What you need is:

问题是在 IE 中(我假设您正在测试的内容),该<iframe>元素具有一个document属性,该属性引用包含 iframe 的文档,并且在contentDocumentorcontentWindow.document属性之前使用了该属性。你需要的是:

function GetDoc(x) {
    return x.contentDocument || x.contentWindow.document;
}

Also, document.allis not available in all browsers and is non-standard. Use document.getElementById()instead.

此外,document.all并非在所有浏览器中都可用并且是非标准的。使用document.getElementById()来代替。

回答by Zhanwen Chen

In case you get a cross-domain error:

如果您遇到跨域错误:

If you have control over the content of the iframe - that is, if it is merely loaded in a cross-origin setup such as on Amazon Mechanical Turk - you can circumvent this problem with the <body onload='my_func(my_arg)'>attribute for the inner html.

如果您可以控制 iframe 的内容——也就是说,如果它只是在跨域设置中加载,例如在 Amazon Mechanical Turk 上——您可以使用<body onload='my_func(my_arg)'>内部 html的属性来规避这个问题。

For example, for the inner html, use the thishtml parameter (yes - thisis defined and it refers to the parent window of the inner body element):

例如,对于内部 html,使用thishtml 参数(是的 -this已定义,它指的是内部 body 元素的父窗口):

<body onload='changeForm(this)'>

<body onload='changeForm(this)'>

In the inner html :

在内部 html 中:

    function changeForm(window) {
        console.log('inner window loaded: do whatever you want with the inner html');
        window.document.getElementById('mturk_form').style.display = 'none';
    </script>