最近工作中使用了让人头疼的iframe,碰到的最大问题是没有好的方法使其高度自适应。尤其在页面进行ajax后,后来Google一番之后,发现iframe-resizer能够比较好的解决这个问题,而且还支持跨域访问(使用postMessage)。
iframe resizer地址:https://github.com/davidjbradshaw/iframe-resizer。
使用方法:在iframe resizer压缩包的js文件夹中,有两个文件:
第一个js是:iframeResizer.min.js。这个js是要放在需要嵌入iframe的页面(parent)中。
第二个js是:iframeResizer.contentWindow.min.js,它需要放到你的iframe页面(child)中去,注意只要引入,不需要代码配置。
然后再parent页面 配置如下:为了兼容需要设置 width:100% scrolling:no overflow:visible
<iframe id="myframe" src="https://**" width="100%" scrolling="no" style="overflow:visible"></iframe>
然后再js中使用:
<script type="text/javascript">
iFrameResize({ log: true }, '#myframe');
</script>
按照以上步骤设置,基本上就能够解决iframe自适应问题,且iframe内容可跨域。