Javascript 访问 iframe 之外的元素

Accessing an element outside of iframe

提问by user646093

I have a file: 1.htmland an iframeinside it.
I want to access an element (lets say myelement) which exists in 1.html(outside of iframe) from the iframe.
How can I do that?
I tried:

我有一个文件：1.html，里面有一个iframe。
我想从iframe访问存在于1.html（iframe 之外）中的元素（可以说是 myelement）。 我怎样才能做到这一点？ 我试过：

top.getElementById("myelement")
top.document.getElementById("myelement")  
parent.getElementById("myelement")
parent.document.getElementById("myelement")

but it didn't work!!

但它没有用！！

回答by Gary Chambers

Communication between an iframe and parent document is not possible for cross-origin resources. It will only work if the iframe and the containing page are from the same host, port and protocol - e.g. http://example.com:80/1.htmland http://example.com:80/2.html

iframe 和父文档之间的通信对于跨源资源是不可能的。仅当 iframe 和包含页面来自相同的主机、端口和协议时才有效 - 例如http://example.com:80/1.html和http://example.com:80/2.html

For cross-origin resources, you can make use of window.postMessageto communicate between the two, but this is only useful if the browser supports this method and if you have control over both resources.

对于跨源资源，您可以使用window.postMessage来在两者之间进行通信，但这仅在浏览器支持此方法并且您可以控制这两种资源时才有用。

Edit - assuming both resources are from the same origin

编辑 - 假设两个资源来自同一个来源

In the iframe, window.parent refers to the global object of the parent document, not the document object itself. I believe you would need to use parent.document.getElementById

在 iframe 中，window.parent 指的是父文档的全局对象，而不是文档对象本身。我相信你需要使用parent.document.getElementById

回答by Salman A

Assuming that same origin policyis not a problem, you can use parent.documentto access the elements, and manipulate them.

假设同源策略没有问题，您可以使用parent.document访问元素，并操作它们。

Demo here, source of outer frame here, source of iframe here.

Demo在这里，外框源码在这里，iframe源码在这里。

回答by nope

Communication between an iframe and parent document is not possible for cross-origin resources

跨源资源无法在 iframe 和父文档之间进行通信

that is in so many ways wrong, i dont even WANT to know where to begin. Of course cross-domain requests and algorith-exchanges have a long history, it is both well documented and working now, one might start JSON-request or even simple XMLHttp-Requests via JQuery, for example, you can even load whole .js-files AND inject them into your code - injecting code in remote sources will of course need an appropriate interface; one may achieve such a thing via communication with the responsible persons, just ask them nicely and maybe they'll cooperate if your project makes sense and has its use.

这在很多方面都是错误的，我什至不想知道从哪里开始。当然跨域请求和算法交换有很长的历史，它都有很好的文档和工作，你可以通过 JQuery 启动 JSON-request 甚至简单的 XMLHttp-Requests，例如，你甚至可以加载整个 .js-文件并将它们注入到你的代码中——在远程源中注入代码当然需要一个合适的接口；一个人可以通过与负责人的沟通来实现这样的事情，只要好好问问他们，如果你的项目有意义并且有用，他们可能会合作。

To answer the question : accessing whole documents would raise the need for transferring it beforehand - i would recommend XML for that purpose because the DOM-tree and XML are nearly interchangeable. Load the tree via .get(.ajaxfor remote hosts), appendit to thisand access it just like you want ... sounds easy and if you got some experience it IS easy. If you ever read "cross-domain" and "not possible" in the same sentence again you might as well ignore the poster - there are many people out there who dont know what they're talking about ;-)

要回答这个问题：访问整个文档会引起事先传输它的需要 - 我会为此目的推荐 XML，因为 DOM 树和 XML 几乎可以互换。通过.get（远程主机的.ajax）加载树，将其附加到此并按照您的需要访问它......听起来很容易，如果您有一些经验，那就很容易了。如果你曾经在同一个句子中再次读过“跨域”和“不可能”，你不妨忽略这张海报——外面有很多人不知道他们在说什么;-)