2010-04-02

iFrame 自适应高度

19+

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

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

HTML代码:

<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>

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>

本文有 19 篇评论 ↓↓

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

  2. terry 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 terry

    OK了 謝謝

  4. 阿杜 阿杜

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

  5. abc abc

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

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

  6. qrdwx qrdwx

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

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

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

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

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

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

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

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

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

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

  15. 不兼容火狐

  16. AAA AAA

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

添加新评论 ↑↑

captcha