访问 iframe 外部的元素

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

在两者之间进行通信，但这仅在浏览器支持此方法并且您可以控制这两个资源时才有用。

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

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

parent.document.getElementById

Answer 2

假设同源策略不是问题，您可以使用

parent.document

访问元素并操作它们。

这里是演示，这里是外框架的来源，这里是iframe的来源。

Answer 3

如果您想通过事件从 iframe 访问 myelement，也许您可以通过 这个：

let myelement = document.querySelector('.my-element') ;
let ifr = document.querySelector('iframe') ;
let ifrDoc = ifr.contentWindow.document ;
let ifrBtn = ifrDoc.querySelector('button') ;
// Now you got the button inside the iframe
// Now you can trigger a event on the button , which can access the myelement
// For example :
ifrBtn.onclick = function(){
 myelement.innerHTML = 'Now you can access an elemen outside an iframe' ;
}
// It will make the myelement's content changed

希望你能得到帮助...

Answer 4

parent.document

不工作

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

Answer 5

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

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

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