当 iframe 的内容发生变化时调整 iframe 的高度（相同的域）答案

【问题标题】：Resizing an iframe height when the contents of the iframe change (same domain)当 iframe 的内容发生变化时调整 iframe 的高度（相同的域）
【发布时间】：2016-10-11 16:19:35
【问题描述】：

我已经研究了几天，但我被困住了......我阅读了这个页面：

Resizing an iframe based on content

还有这个页面：

Auto resize iframe height when the height of the iframe contents change (same domain)

当包含 iframe 的 maine index.html 首次加载时，调整 iframe 的大小似乎相对容易，但是一旦 iframe 更改内容，我就无法弄清楚如何调整 iframe 的大小。

我的 index.html：

<body>
<iframe seamless frameborder="0" name="top" id="top" src="venues.php" width="100%" height="100" /></iframe>
<iframe seamless frameborder="0" name="main" id="main" src="admin.php" width="100%" height="2000" /></iframe>

当venues.php 加载时它是100px（这很好）但是当有人在venues.php 页面内点击（内部，相同域）链接时，我需要调整“顶部”框架高度以适应新内容。

我尝试了很多解决方案，我总是只能在第一次加载时调整它的大小，而不是当有人点击它时。

谢谢

【问题讨论】：

我已经解决了这个问题，使用框架中的 JS 向容器中的 JS 发送消息。消息说框架需要多大，容器中的 JS 比调整控件的大小。
你能给我看一个例子，或者至少告诉我你是如何将消息发送到容器的吗？我的印象是（从我在其中一个链接中读到的内容）您无法从孩子与父母交流
你看过了吗：-stackoverflow.com/questions/12082125/…

标签： javascript html iframe

【解决方案1】：

你可以看看 David Bradshaws git repo

他开发了一个很好的脚本来做你正在寻找的事情。

保持相同和跨域 iFrame 的大小与其内容相同，支持 >窗口/内容调整大小、页面链接、嵌套和多个 iFrame。 >（无依赖，IE8+）http://davidjbradshaw.github.io/iframe-resizer/

【讨论】：

我查看了 Bradshaw 的 iFrame Resizer，但无法让它工作......事实上，在 Chrome（本地）中，他的测试示例甚至不适合我
@marcnyc 试试我的演示，Chrome 51 测试就好了。

【解决方案2】：

您可以使用mutation observer 事件和postMessage API，创建和实施可以协商经常更改的 iframe 的尺寸测量的脚本非常困难。我放弃了从头开始写东西并使用了这个小插件：

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

这个 Plunker 演示了在 iframe 调整大小时检测到mutation observer 事件触发时使用此插件。

PLUNKER

【讨论】：

没问题，我很乐意提供帮助。