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

  • 相关阅读:
    搭建 Linux 下 GitLab 服务器(转)
    sql语法:inner join on, left join on, right join on具体用法
    Android Studio之同一应用创建多个Activity(一)
    java环境变量配置
    老鸟的Python新手教程
    域名注冊以及域名解析设置
    Android在WebView上构建Web应用程序
    利用JasperReport+iReport进行Web报表开发
    android App Widgets
    多数据库下activiti的流程定义缓存问题
  • 原文地址:https://www.cnblogs.com/shineqiujuan/p/1370113.html
Copyright © 2011-2022 走看看