访问 iframe 之外的元素

IT技术 javascript iframe
2021-02-20 23:04:45

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

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

但它没有用！！

4个回答

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 非常复杂......在某处丢失了它......再次感谢。
2021-04-25 23:04:45
parent.document.getElementById 工作正常...谢谢
2021-05-04 23:04:45
您也可以在 window.parent 的文档中使用 querySelector window.parent.document.querySelector("SELECTOR");
2021-05-17 23:04:45
我发现与此相关的一些事情，如果您使用 parent.myfunction() 调用父页面上的函数，您仍然需要这样做才能访问这些元素。至少我确实使用了 Firefox。
2021-05-20 23:04:45

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

Demo在这里，外框的来源在这里，iframe的来源在这里。

它被阻止了。 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
2021-04-21 23:04:45
@shingom 这种方法在实践中确实有效。我相信 jsfiddle 上存在错误，因为该站点处理 iframe 的方式。
2021-05-07 23:04:45

parent.document 不工作

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

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

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

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

您所谈论的基本上是客户端 html 抓取。这听起来不像是 OP 想要做的。就“跨域”和“不可能”而言……人们在阻止 iframe 从其他域访问窗口方面遇到了很多麻烦。我认为你没有很好地理解这个问题。
2021-05-14 23:04:45
其它你可能感兴趣的问题
上一篇从 Error 对象继承 - message 属性在哪里？ 下一篇为什么使用括号来包装 javascript 函数调用？