iframe高度自适应的实现

一、背景：

　　这个应用的地方太多了，到百度搜索解决方法一大堆，但是真正可以实现的却很少，在asp.net中新增一个页面的时候会自动生成一行代码（如下）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　在这个标准下很多解决方法都会失效，具体为什么在这里不做叙述，只说解决办法。

二、代码如下：

<div>
         <iframe id="iframe_item" width="100%" name="iframe_item" src="XXXXX.aspx"
             scrolling="no" frameborder="0" onload="this.height=100"></iframe>
 
        <script type="text/javascript">
             function reinitIframe() {
                 var iframe = document.getElementById("iframe_item");
                 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>
 
    </div>

解释：页面加载的时候给个初始高度，之后动态获取嵌入帧的高度以达到自适应的效果，很多人会怀疑效率问题，在这里可以告诉大家几乎没有任何影响。cpu和内存的使用率没变化。对于那些喜欢在这种问题上纠结的人，或者是过分追求性能的程序员不建议使用。希望对有些人有帮助把。。。。，有问题请留言。。。。

posted on 2011-10-10 15:17  我is小黑  阅读(284)  评论(0)  编辑  收藏  举报

导航