也说iframe的高度自适应

关于iframe的高度自适应,已经是一个非常古老的话题了,在网上可以找出来很多种解决办法,但是当在iframe中打开页面中的链接(即在同一个iframe中打开不同长度的页面),是否可以动态的变化适应高度呢?

先放上网上的一种比较简单的兼容性算比较好的方法:

1
2
3
4
5
6
7
8
9
10
11
12
<iframe id="frame_content" src="https://wenfan.hk/" width="300" height="150" frameborder="0" scrolling="no"></iframe> <script type="text/javascript">
    function reinitIframe(){
    var iframe = document.getElementById("frame_content");
    try{
    var bHeight = iframe.contentWindow.document.body.scrollHeight;
    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
    var height = Math.max(bHeight, dHeight);
    iframe.height =  height;
    }catch (ex){}
    }
    window.setInterval("reinitIframe()", 200);
    </script>

还可以参考一下blueidea论坛上的一篇老帖子
最后,在国内的几乎所有技术论坛上,都貌似没有找到较好的解决办法,只有请出GOOGLE大神了,发现了宝物——JQUERY IFRAME SIZING,也是通过jQuery实现的,但是唯一的遗憾是iframe引用页面是不能跨域的,关于跨域的解决办法国内论坛上已经存在,有兴趣的可以自行百度。

效果可以参见本站DEMO,打包下载
原始项目地址见此