这就是问题所在!我有一个加载外部网站的 iframe。我希望 iframe 根据内容高度调整为 100%,这样我就不会看到滚动条。将 iframe 高度设置为 100% 不起作用。
我想出了两个解决方案:
- 将两端的 document.domain 属性设置为同一域,这使 iframe 内容可以访问父窗口。的可以从 iframe 中启动调整大小方法。
- 使用 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