`

让页面中iframe 或者 div 高度自适应

 
阅读更多
     我们在项目中的开发标准分辨率是1024*768,但是在当今大屏幕显示器越来越普及的情况下,我们需要尽量让整个页面铺满,少留空白,同时兼容各种浏览器。在网上搜了一位高手朋友的代码,再此感谢那位仁兄。
      要实现 iframe 或者 div 在 页面中的高度自适应,我们需要做两件事情:
1  取得 页面的高度 ,JS代码如下
   /*
*获得页面的高度、宽度,兼容各种浏览器的方法
*@author fengf
*@createDate 2011-10-25
*/
function  ___getPageSize() {  
            var xScroll, yScroll;  
            if (window.innerHeight && window.scrollMaxY) {    
                xScroll = window.innerWidth + window.scrollMaxX;  
                yScroll = window.innerHeight + window.scrollMaxY;  
            } else if (document.body.scrollHeight > document.body.offsetHeight){
                // all but Explorer Mac  
                xScroll = document.body.scrollWidth;  
                yScroll = document.body.scrollHeight;  
            } else {
                // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari  
                xScroll = document.body.offsetWidth;  
                yScroll = document.body.offsetHeight;  
            }  
            var windowWidth, windowHeight;  
            if (self.innerHeight) {
                // all except Explorer  
                if(document.documentElement.clientWidth){  
                    windowWidth = document.documentElement.clientWidth;   
                } else {  
                    windowWidth = self.innerWidth;  
                }  
                windowHeight = self.innerHeight;  
            } else if (document.documentElement && document.documentElement.clientHeight) {
                // Explorer 6 Strict Mode  
                windowWidth = document.documentElement.clientWidth;  
                windowHeight = document.documentElement.clientHeight;  
            } else if (document.body) {
                // other Explorers  
                windowWidth = document.body.clientWidth;  
                windowHeight = document.body.clientHeight;  
            }     
            // for small pages with total height less then height of the viewport  
            if(yScroll < windowHeight){  
                pageHeight = windowHeight;  
            } else {   
                pageHeight = yScroll;  
            }  
            // for small pages with total width less then width of the viewport  
            if(xScroll < windowWidth){     
                pageWidth = xScroll;          
            } else {  
                pageWidth = windowWidth;  
            }  
            arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);  
            return arrayPageSize;  
        }; 

2  根据页面的高度,去设置 页面中 iframe 或者 div 的高度,这里有个div 或者iframe 的最小高度,iframe的高度一般等于页面的高度减去某一个固定高度,如下面300就是除去div后其他组件的固定高度
function resizeDivOrIFrame(){
  document.getElementById("targetDiv").style.height = ___getPageSize[1]-300;
}

3 在页面中 启动一个线程,不断的调用
window.setInterval("resizeDivOrIFrame()", 200);

ps:遇到一个奇怪的问题: 有一个页面是一个带下拉列表搜索的,结果列表的高度一直在增加,不知其解。
分享到:
评论

相关推荐

    自适度div高度

    自适度div高度,js获取元素位置和窗口高度,自动适应,也可以使用在父框是iframe,有完整的js实例

    javascript 装载iframe子页面,自适应高度

    假设主页面有一个div,里面放置一个iframe 代码如下:&lt;div id=”frameBox”&gt; &lt;iframe id=”frameWin” src=”1.html” name=”opWin” style=”width:100%; height:100% ” frameborder=”0″ scrolling=”no”&gt...

    嵌入到HTML的iframe自动适应大小

    让嵌入到HTML的iframe自动适应大小

    使两个iframe的高度与内容自适应,且相等

    &lt;div u00a0class=”TxtBox”&gt; &lt;iframe frameborder=”0″ scrolling=”no” name=”news1″ id=”news1″ onload=”if(document.frames[‘news1’].document.body.scrollHeight&gt;document.frames[‘news2...

    自适应高度框架 —-属个人收藏内容

    main.htm: &lt;... &lt;head&gt; &lt;... charset=gb2312′ /&gt; &lt;... &lt;...iframe自适应加载的页面高度&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt;&lt;iframe src=”child.htm”&gt;&lt;/i

    js跨域问题之跨域iframe自适应大小实现代码

    var t = document.createElement(“div”); t[removed] = ‘&lt;iframe id=”kxiframeagent” src=”http://rest.kaixin001.com/api/agent.html#’+dHeight+'”scrolling=”yes” height=”0px” w

    flex中嵌入网页完美解决方案

    利用google-iframe在flex中嵌入网页是在swf上覆盖一个div,flex与网页无法融合,这样会出现各种显示,控制问题,如页面自适应,页面显示控制,内容遮盖,网页内容不随flex滚动条滚动等,现在这些问题都解决了

    浏览器兼容

    常用多浏览器不容兼的描述及解决方法 包含:CSS ... iframe高度自适应 、其它特性描述: alt属性 title属性 去掉超链接或按钮点击时的虚框线 border:none;与border:0;的区别 解决IE8下div移位、错位等兼容性问题

    超实用的jQuery代码段

    1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -ExtAspNet支持原生的AJAX,也就是说控件的属性改变在AJAX过程中会反映到页面中,但并不是所有的控件属性都支持AJAX改变。 -加载s.gif图片在本机进行,不会请求extjs.com远程资源(feedback:efrigate43,abaocoole)...

    《程序天下:JavaScript实例自学手册》光盘源码

    5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...

    程序天下:JavaScript实例自学手册

    5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉...

    ExtAspNet_v2.3.2_dll

    -ExtAspNet支持原生的AJAX,也就是说控件的属性改变在AJAX过程中会反映到页面中,但并不是所有的控件属性都支持AJAX改变。 -加载s.gif图片在本机进行,不会请求extjs.com远程资源(feedback:efrigate43,abaocoole)...

    DotNetTextBox所见即所得编辑器控件 v3.3.1

    &lt;br&gt;2007/6/25 Version 3.1.5 beta &lt;br&gt;Updates: 1) 修正在VS2005设计模式中无法动态调整控件高度的BUG。 2) 修正height属性无效的BUG。 3) 修正CodeHighlighter外挂插件调用图片位置指向不正确...

Global site tag (gtag.js) - Google Analytics