Question

我有一个文件： 1.html ，里面有一个 iframe 。
我想从 iframe 访问 1.html （iframe外部）中存在的元素（比如说myelement）。
我怎么能这样做？
我试过了：

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

但它不起作用!!

Answer 1

跨域资源无法在iframe和父文档之间进行通信。它只有在iframe和包含页面来自同一主机，端口和协议时才有效 - 例如http://example.com:80/1.html和http://example.com:80/2.html

对于跨源资源，您可以使用window.postMessage在两者之间进行通信，但这仅在浏览器支持此方法且您可以控制这两种资源时才有用。在MDC页面上有关于window.postMessage的更多详细信息：https://developer.mozilla.org/en/DOM/window.postMessage

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

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

Answer 2

假设same origin policy不是问题，您可以使用parent.document来访问元素并对其进行操作。

Demo here，source of outer frame here，source of iframe here。

Answer 3

parent.document 不工作

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

Answer 4

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

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

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

访问iframe之外的元素

4 个答案: