2010-04-02

iFrame 自适应高度

32+

经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。

演示地址:http://www.fufuok.com/demo/adaptive-height-iframe.html

HTML代码:

<script type="text/javascript" language="javascript">   
	function iFrameHeight() {   
		var ifm= document.getElementById("iframepage");   
		var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;   
		if(ifm != null && subWeb != null) {
		   ifm.height = subWeb.body.scrollHeight;
		}   
	}   
</script>

Javascript代码:

<script type="text/javascript" language="javascript">   
	function iFrameHeight() {   
		var ifm= document.getElementById("iframepage");   
		var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;   
		if(ifm != null && subWeb != null) {
		   ifm.height = subWeb.body.scrollHeight;
		}   
	}   
</script>

本文有 32 篇评论 ↓↓

  1. 朋友交换友链吧。
    我也是typecho以后多多交流。
    你的我已经加上。

  2. terry

    hi
    我直接複製貼上到空白網頁
    可是沒有像你的演示地址裡一樣正確可行
    可以教我嗎?

    無標題文件

    function iframeHeight() {
    var ifm= document.getElementById("iframepage");
    var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
    if(ifm != null && subWeb != null) {
    ifm.height = subWeb.body.scrollHeight;
    }
    }

    1. 直接在本地运行可能会提示没有权限执行,放到服务器上浏览试试。

  3. terry

    OK了 謝謝

  4. 阿杜

    你怎么设置一下可以了呢?

  5. abc

    借用您的代码,在本地执行ie8中显示还是不正常,这是为什么呢?可以指教下嘛?

    1. 直接打开执行无效,放到服务器状态以http地址浏览即可。

      1. 白板

        不行 我试过了 还是不行的 我的嵌套另外一个服务器的页面 提示无权限访问 怎么办 急急急

        1. dan

          我也碰到这问题了,请问有办法解决吗

  6. qrdwx

    扯淡,
    放到服务器上都不正常的,
    第一次听说在本地“无访问权限错误”的JS代码放到服务器上就正常了。

    1. 意思是不要直接以 file://E:\**.html 的方式打开,以 http://***.html 的服务器方式进行页面浏览。

  7. 不行,博主再好好研究一下!

  8. 博主,不行啊,我在firefox下打开为空的,好像高度没取对啊

  9. 你好,想跟你交换下连接

  10. 这个只能同域下生效,由于js跨域的安全问题,跨域时无法获取高度。

  11. 主要还是跨域的问题麻烦

  12. 我这里是跨域调用的,用你这个就不行,我想知道跨域怎么使用自适应高度?

  13. 朋友交换友链吧。
    我的是lamp技术社区。 lamp吧.

  14. 知道你为什么可以正常显示你的页面吗,因为你用的都是自己的域名页面,也就是说你没有跨域.关于iframe跨域然后自动适应高度,很头疼,我现在还没解决...

  15. 不兼容火狐

  16. AAA

    绝对好用!!!感谢楼主分享!!

  17. 过路者

    火狐不兼容,基本没有!

    1. 火狐9.0.1打开演示地址显示正常。

  18. 同域可以,跨域不行。

  19. 沉默

    为什么弄上不起效果啊?

  20. IE正常,可是Chrome不行。

    1. 打开上面的演示页,在Chrome下表现正常。

  21. 不兼容火狐12版本的
    有办法兼容么?

  22. mosa

    这也叫自适应?你这是load之后 算出高度的,那如果已经加载进来以后,页面进行了扩展,你这个方法就不行了

  23. tommy

    自己设置了个高度,人品不行啊

  24. aa

    推荐个文章,解决iframe自适应高度并决jquery ajax获取数据后高度自适应问题
    http://www.suchso.com/projecteactual/jquery-ajax-iframe-resetiframeheight.html

  25. 请问你是如何做到,只有我在你这评论了一次留了网址,然后每次百度搜我的网址wefun.pw/med会搜到你每一篇文章都有我的网址的,你用的是什么评论系统