首页 文章

iframe内容更改时调整iframe高度(同一个域)

提问于
浏览
2

我已经研究了几天而且我被困了......我读了这个页面:

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

我已经尝试了一堆解决方案,我总是只能在第一次加载时调整它,但是当有人点击它时不会 .

谢谢

2 回答

  • 1

    您可以使用 mutation observer 事件和 postMessage API ,创建和实现可以协商经常更改的iframe的维度度量的脚本非常困难 . 我放弃了从头开始编写的东西并使用了这个小插件:

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

    这个 Plunker 演示了在调整iframe大小时检测 mutation observer 事件时使用此插件的情况 .

    PLUNKER

  • 0

    你可以看看David Bradshaws git repo

    他开发了一个很好的脚本来做你想要的 .

    保持相同的跨域iFrame大小适合其内容,支持>窗口/内容大小调整,页面链接,嵌套和多个iFrame . >(依赖免费,IE8)http://davidjbradshaw.github.io/iframe-resizer/

相关问题