`

让页面中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:遇到一个奇怪的问题: 有一个页面是一个带下拉列表搜索的,结果列表的高度一直在增加,不知其解。
分享到:
评论

相关推荐

    Iframe 高度自适应,js控制Iframe 高度自适应.docx

    在 iframe 高度自适应中,需要考虑多种浏览器的兼容性问题,包括 Firefox、IE、Opera 等不同的浏览器。因此,需要使用不同的方法来实现 iframe 高度的自适应。 方法一:使用 JavaScript 控制 iframe 高度自适应 ...

    Iframe 高度自适应浏览器高度

    标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...

    iframe自适应高度(兼容目前所有主浏览器)

    iFrame 自适应高度的定义是指隐藏 iFrame 的 border 和 scrollbar,让用户无法察觉到它是一个 iFrame。当 iFrame 需要切换页面或执行 DOM 动态操作时,需要程序去同步 iFrame 高度和被包含页的实际高度。 传统的...

    iframe高度自适应

    ### iframe高度自适应知识点详解 在网页开发过程中,经常会遇到需要将一个页面嵌入到另一个页面中的场景,这时就会用到`&lt;iframe&gt;`标签。然而,默认情况下,`&lt;iframe&gt;`的高度是固定的,当其内部内容发生变化时,可能...

    iframe自适应高度(兼容多种浏览器)

    因此,实现`iframe`的高度自适应对于优化用户体验、提高页面美观度具有重要意义。 #### 一、需求分析 本案例的目标是实现`iframe`自适应高度的功能,并确保其能够在不同的浏览器环境下正常工作。这里所说的“多种...

    网页制作中Iframe自适应高度的解决办法

    在网页制作过程中,Iframe(内联框架)是一种常见的元素,用于在页面中嵌入其他网页或者内容。然而,Iframe的高度自适应往往是一个棘手的问题,因为如果内容动态加载或者不同长度,Iframe默认的高度可能无法适配,...

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

    在探讨“嵌入到HTML的iframe自动适应大小”的主题时,我们主要关注的是如何使一个内嵌在HTML页面中的iframe元素能够根据其内容或者父容器的尺寸动态调整自身的高度,从而实现良好的响应式设计和用户体验。...

    自适度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...

    iframe中页面显示不全1

    当遇到"Iframe中页面显示不全"的问题时,通常是由于iframe的尺寸设置不当或者与被嵌入内容的尺寸不匹配导致的。下面将详细探讨如何解决这一问题以及相关的知识点。 首先,我们需要了解`&lt;iframe&gt;`的基本结构和属性。...

    自动调节iframe高度,而不显示其滚动条 js

    然而,当嵌入的内容高度不确定或者会动态变化时,如何让`iframe`的高度自适应其内容,并且不显示不必要的滚动条就成为了一个常见的需求。 #### 知识点解析 ##### 1. iframe元素简介 `iframe`(Inline Frame)是...

    iframe src为图片时的高度自适应的代码

    当iframe的src属性指向一张图片时,如何让iframe的高度自适应图片的大小,是一个常见且实用的需求。本文将详细介绍一种实现方法,并深入探讨其背后的原理。 #### 实现原理 在标准的iframe高度自适应方案中,通常是...

    iframe 自适应 实例

    - **高度自适应**:高度自适应相对复杂,因为`iframe`内容可能动态加载或不同页面高度不一致。一种常见的方法是通过JavaScript动态获取`iframe`内容的高度并设置。 3. **JavaScript实现高度自适应**: 使用...

    Iframe 高度自适应(兼容IE/Firefox、同域/跨域)

    当主页面和 Iframe 页面不在同一域名时,直接通过 JavaScript 获取对方页面高度的方法会因为跨域限制而失败。 为了解决跨域问题,文中提出了使用中介页面(agent.html)来传递高度信息的解决方案。基本原理是:当...

    iframe 多层嵌套 无限嵌套 高度自适应的解决方案

    // 进行Iframe的自动撑开,让所有父页面的Iframe都自动适应包含页高度 function autoHeight() { var doc = document, p = window; while (p = p.parent) { var frames = p.frames, frame, i = 0; while (frame = ...

Global site tag (gtag.js) - Google Analytics