访问 iframe 之外的元素答案

【问题标题】：Accessing an element outside of iframe访问 iframe 之外的元素
【发布时间】：2011-04-09 11:48:24
【问题描述】：

我有一个文件：1.html 和一个 iframe。
我想从 iframe 访问存在于 1.html（iframe 之外）中的元素（比如说 myelement）。
我该怎么做？
我试过了：

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

但是没用！！

【问题讨论】：

iframe accessing parent DOM? 的可能重复项

标签： javascript iframe

【解决方案1】：

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

对于跨域资源，你可以使用window.postMessage在两者之间进行通信，但这只有在浏览器支持这种方法并且你对这两个资源都有控制的情况下才有用。

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

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

【讨论】：

parent.document.getElementById 确实有效！！！。也许我忽略了这一点...我必须在原始文档（jsp）和 iframe（也是 jsp）之间进行通信。涉及会话 bean 非常复杂...在某处丢失了...再次感谢。
我发现与此相关的内容，如果您使用 parent.myfunction() 调用父页面上的函数，您仍然需要执行此操作才能访问这些元素。至少我使用 Firefox。
parent.document.getElementById 工作正常...谢谢
您也可以在 window.parent 的文档中使用 querySelector window.parent.document.querySelector("SELECTOR");

【解决方案2】：

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

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

【讨论】：

它被阻止了。 Uncaught DOMException: Blocked a frame with origin "http://fiddle.jshell.net" from accessing a cross-origin frame. at http://fiddle.jshell.net/salman/tye5R/show/light/:39:12
@shingom 此方法在实践中确实有效。我相信由于站点处理 iframe 的方式，jsfiddle 存在错误。

【解决方案3】：

parent.document 不工作

对于跨域资源，你可以使用window.postMessage在两者之间进行通信，但是只有在浏览器支持这种方法并且你对这两个资源都有控制的情况下才有用。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

您所说的基本上是客户端 html 抓取。听起来这不是OP想要做的。就“跨域”和“不可能”而言……人们经历了很多麻烦来阻止 iframe 从其他域访问窗口。我认为您不太了解这个问题。