zoukankan      html  css  js  c++  java
  • 让IFRAME根据其中的内容自适应高度

    项目的界面采用的是最常规的结构,左边是菜单,右边是内容,而点击菜单,会在右边展示不同的页面,为了减少页面刷新的影响,我们依旧考虑用IFRAME,之前用微软的模板页,可是刷新太频繁,给客户的体验不好。而用IFRAME的时候,又不希望其出现滚动条,就需要其自适应高度。之前JS的基础不好,在网上找到了些解决方案,可是兼容性不好,最近加强了Javascript的学习,今天对程序做了些做了些修改,调试了下,还不错。代码如下:

    Code
    function iframeAutoFit()
    {
    var ex;
        
    try
        {
            
    if(window!=parent)
            {
                
    var a = parent.document.getElementsByTagName("IFRAME");
                
    for(var i=0; i<a.length; i++
                {
                    
    if(a[i].contentWindow==window)
                    {
                        
    var h1=0, h2=0;
                        
    if(document.documentElement && document.documentElement.scrollHeight)
                        {
                            h1
    =document.documentElement.scrollHeight;
                        }
                        
    if(document.body) h2=document.body.scrollHeight;
                        
    var h=Math.max(h1, h2);
                        
    if (window.ActiveXObject) { h += 4; }
                        
    else {h += 4;}
                        a[i].style.height 
    = h + "px";
                        window.removeEventListener(
    'resize', iframeAutoFit, false);//兼容谷歌浏览器时要去掉RISZE监听
                    }
                }
            }
        }
    catch (ex){}
    }
    if(document.attachEvent)
    {
        window.attachEvent(
    "onload", iframeAutoFit);
        window.attachEvent(
    "onresize", iframeAutoFit);
    }
    else
    {
        window.addEventListener(
    'load', iframeAutoFit, false);
        window.addEventListener(
    'resize', iframeAutoFit, false);
    }

     对以上程序稍做说明:

    判断Iframe的高度和其源文件的高度的最大值,给Iframe高度赋最大值。最后在加4个像素.if语句主要是为了判断不同的浏览器。最后的两段IF else是给不同的浏览器添加监听方法。

  • 相关阅读:
    分数的加减法——C语言初学者代码中的常见错误与瑕疵(10)
    关于陈冰、陈良乔以及《我的第一本C++书》【转】
    逻辑训练与说理教育从小学开始【转】
    薛非《品悟C-抛弃C程序设计中的谬误与恶习》读后感part1【转】
    C语言初学者代码中的常见错误与瑕疵(9)
    为什么在我眼里你是一只傻逼——傻逼“常所用”句型之(1)——“就算……但是……”
    要心中有“数”——C语言初学者代码中的常见错误与瑕疵(8)
    220v转5v阻容降压电路
    IAR for stm8 memory窗口的功能
    stm8 io口重映射
  • 原文地址:https://www.cnblogs.com/shineqiujuan/p/1370113.html
Copyright © 2011-2022 走看看