Iframe 调整大小和跨站点脚本

Iframe resize and cross site scripting

本文关键字：站点 脚本 调整 Iframe      更新时间：2023-09-26

这就是问题所在！我有一个加载外部网站的 iframe。我希望 iframe 根据内容高度调整为 100%，这样我就不会看到滚动条。将 iframe 高度设置为 100% 不起作用。

我想出了两个解决方案：

  1. 将两端的 document.domain 属性设置为同一域，这使 iframe 内容可以访问父窗口。的可以从 iframe 中启动调整大小方法。
  2. 使用 HTML5 postMessage API 采取适当的操作。我习惯在两个 iframe 之间进行通信。

这两种方法都很复杂。有没有更简单的方法来解决这个问题？

您可以将另一个 iframe 嵌入到您的 iframe 中。如果该 iframe 的源来自与顶级 iframe 相同的域、协议和端口，那么它可以通过 parent.parent 访问它

去年我遇到了同样的问题，并在此博客上找到了适合我的解决方案：http://solidgone.org/Set-IFRAME-height-based-on-size-of-remotely-loaded-content

该方法

的更新版本可以在他的后续文章中找到：http://solidgone.org/Redux-Set-IFRAME-height-based-on-size-of-remotely-loaded-content

正如 jack 所描述的那样，该实现需要将嵌入的 iframe 嵌入到您的页面中，其中包含同一父域的源。

我在FF中确实遇到了一个小问题。解决方案可以在后续文章的评论中找到。

希望这有帮助！

一个更简单的解决方案是在 github 上使用这个小项目。

https://github.com/davidjbradshaw/iframe-resizer

相关文章：