iframe 如何访问其父 DOM？

IT技术 javascript html iframe cross-domain
2021-03-10 09:51:19

内的脚本怎么可能对<iframe>包含它的页面有任何概念？框架中的脚本可以访问框架之外的任何上下文吗？跨域呢？

到现在为止，我认为一个<iframe>是完全不可知的包含页面，但我已经看到了这违背这种信念的例子。

<iframe>就包含页面而言，从内部到底可以做什么和不能做什么？

3个回答

如果 iframe 的内容与其父级具有相同的域，则可以使用parent.document.getElement....

但是，您不能跨域（甚至不能跨不同的子域）执行此操作，因为它会导致：

Uncaught DOMException: Blocked a frame with origin "https://example.com" from accessing a cross-origin frame.
@oezi，我有一个从不同域加载 iframe 的文档。我能够从加载在该 iframe 中的文档中操作 iframe 属性。我使用 parent.document.getElementById() 来获取元素，然后使用 $(ele).attr('width','100%'); 添加一个属性。我不知道为什么它对我有用。如果您想了解我的环境的任何细节以更好地了解这个问题，请告诉我。谢谢
2021-04-15 09:51:19
每天学些新东西 ：）
2021-04-21 09:51:19
@Rishabh 你用的是哪个浏览器？
2021-04-21 09:51:19
仅供参考，top是顶层文档，self是当前文档，parent是当前文档之上的文档。
2021-04-25 09:51:19

通常，您无法跨域在两个 DOM 之间进行通信。但是，有一种方法可以使用 iframe url 的哈希部分在两者之间传递消息。对于同一域上的 iframe，请参阅oezi 的回答。

这可能会有所帮助，这里还有很多关于这个主题的其他问题。

有趣的文章，奇怪的是它认为 html5 的 postmessage 还没有足够的支持，因为 safari、chrome、firefox、opera 甚至 MSIE8 都支持它。使用 jquery postmessage 插件（它使用您链接的文章中使用的一些技术），它变得完全跨浏览器。
2021-04-16 09:51:19
我认为这是可以理解的——它写于 2008 年 3 月 :) jQuery 插件虽然听起来很有趣。
2021-04-20 09:51:19

如果它们不在同一个域中，您可以通过 url 片段/哈希传递一些信息。这是该过程的一个很好的例子......

http://www.tagneto.org/blogcode/xframe/ui.html

其它你可能感兴趣的问题
上一篇使用 Selenium 访问 Shadow DOM 树 下一篇如何在客户端启动桌面应用程序