iframe内容更改时调整iframe高度(相同域) [英] Resizing an iframe height when the contents of the iframe change (same domain)
问题描述
我一直在研究这个问题,并且我被卡住了......我读了这个页面:
以及此页面:
iframe内容高度变化时自动调整iframe的高度(相同域名)
看起来相对比较当包含iframe的maine index.html首次加载时,很容易调整iframe的大小,但是一旦iframe改变内容,我无法弄清楚如何重新设置iframe的大小。
我的index.html:
< body>
当venues.php加载它时100px(这很好),但当某人在(vennal.php)页面内的(内部,相同域)链接中存储时,我需要调整顶部框架高度以适应新内容。
我尝试了一系列解决方案,我总是只能在第一次加载时调整大小,而不是在有人点击它时调整大小。
谢谢
突变观察者
事件和 postMessage API
,创建并实现脚本可以协商频繁更改的iframe的维度测量非常困难。我放弃了从头开始编写一些东西,并使用这个小插件:
https://github.com/davidjbradshaw/iframe-resizer
Plunker 演示了在检测到该插件时使用此插件突变观察者
发生iframe调整大小时触发事件。
$ b PLUNKER
I've been researching this for a few days and I'm stuck... I read this page:
Resizing an iframe based on content
and this page:
Auto resize iframe height when the height of the iframe contents change (same domain)
It seems it's relatively easy to resize an iframe when the maine index.html that contains the iframes first loads, but once the iframe changes content I can't figure out how to re-size the iframe.
my 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>
When venues.php loads it's 100px (which is fine) but when somebody clisk in a (internal, same domain) link inside the venues.php page I need to resize the "top" frame height to fit the new contents.
I've tried a bunch of solutions I can always only get it resized on the first load but not when somebody clicks inside it.
Thanks
You could use the mutation observer
event and the postMessage API
, It's very difficult to create and implement script that can negotiate the dimension measurements of an iframe that frequently changes. I gave up on writing something from scratch and used this small plugin:
This Plunker demonstrates the use of this plugin when detecting the mutation observer
event fire when resizing of the iframe happens.
这篇关于iframe内容更改时调整iframe高度(相同域)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!