• 让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是给不同的浏览器添加监听方法。

  • 相关阅读:
    webstorm 2017 激活破解 最新 2018
    phpexcel 导出xsl乱码
    微信小程序的z-index在苹果ios无效
    onenote架设在局域网服务器
    .gitignore忽略多层文件夹用**
    phpstorm 使用xdebug断点
    Phpstudy 无法启动mysql
    git使用kdiff3合并乱码问题
    小程序回退刷新操作
    Navicat 连接远程服务器mysql 长时间不操作会连接很久
  • 原文地址:https://www.cnblogs.com/shineqiujuan/p/1370113.html
Copyright © 2020-2023  润新知