javascript - 当 iframe 内容更改时调整 iframe 高度(同一域)

标签 javascript html iframe

我已经研究了几天,但我被困住了......我读了这个页面:

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页面内的(内部,相同域)链接时,我需要调整“顶部”框架的高度以适应新内容。

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

谢谢

最佳答案

您可以使用变异观察者事件和postMessage API,创建和实现可以协商频繁更改的iframe尺寸测量的脚本非常困难。我放弃了从头开始编写一些东西并使用了这个小插件:

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

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

PLUNKER

关于javascript - 当 iframe 内容更改时调整 iframe 高度(同一域),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37752621/

相关文章:

HTML DIV 高度冲突

javascript - 如何在 cordova 中动态加载 CSS

javascript - replaceWith 后的 Dom 就绪事件

Javascript一次选择所有单选按钮

javascript - 多键值查询搜索输入框

javascript - 提交后更改表单目标

javascript - 删除 iframe 后窗口事件丢失

用于视频的 Javascript 新窗口未在 IE 中调整大小

javascript - 如何在 promise 中正确实现 mongodb async/await?

javascript - 如何使用 javascript 将选中的复选框值传递到下一页