JavaScript应用:Iframe自适应其加载的内容高度

原创 2006年06月02日 14:01:00

main.htm:

<html> 
    <head> 
       <meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312' /> 
       <meta  name='author'  content='F.R.Huang(meizz梅花雪)//www.meizz.com' /> 
       <title>iframe自适应加载的页面高度</title> 
    </head> 
    
    <body>
        <iframe src="child.htm"></iframe>
    </body>
</html>

child.htm:

<html> 
<head> 
    <meta  http-equiv='Content-Type'  content='text/html;  charset=gb2312' /> 
    <meta  name='author'  content='F.R.Huang(meizz梅花雪)//www.meizz.com' /> 
    <title>iframe  自适应其加载的网页(多浏览器兼容)</title> 
    <script type="text/javascript">
    <!--
    function iframeAutoFit()
    {
        var ex;
        try
        {
            if(window!=parent)
            {
                var a = parent.document.getElementsByTagName("IFRAME");
                for(var i=0; i<a.length; i++) //author:meizz
                {
                    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(document.all) {h += 4;}
                        if(window.opera) {h += 1;}
                        a[i].style.height = h +"px";
                    }
                }
            }
        }
        catch (ex){}
    }
    if(document.attachEvent)
    {
        window.attachEvent("onload",  iframeAutoFit);
        window.attachEvent("onresize",  iframeAutoFit);
    }
    else
    {
        window.addEventListener('load',  iframeAutoFit,  false);
        window.addEventListener('resize',  iframeAutoFit,  false);
    }
    //-->
    </script> 
</head> 
<body>
    <table border="1" width="200" style="height: 400px; background-color: yellow">
        <tr>
            <td>iframe  自适应其加载的网页(多浏览器兼容,支持XHTML)</td>
        </tr>
    </table>
</body> 
</html>

iframe根据内容自适应高度教程

博主今天调iframe根据内容自适应高度,发现好多坑。首先呢发现得到全文的高度在各大浏览器里的写法是不一样的,IE和火狐是一种写法,360和谷歌是另一种。所以呢就得根据浏览器的名称用不同的代码;后来用...
  • qq_33556185
  • qq_33556185
  • 2016年02月15日 19:29
  • 6862

iframe高度自适应内容

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的,那么我们可以通过CSS来给它直接定义...
  • yipanbo
  • yipanbo
  • 2016年04月27日 19:32
  • 1510

如何让iframe框架自适应内容高度

$(function(){   var document_height="";   //iframe自适应高度   var timeIframe;   window.onload=func...
  • benben1164
  • benben1164
  • 2016年11月09日 11:09
  • 705

JavaScript应用:Iframe自适应其加载的内容高度

main.htm:                                 iframe自适应加载的页面高度                             child.htm:   ...
  • Reasoncool
  • Reasoncool
  • 2006年11月19日 22:13
  • 776

JavaScript应用:Iframe自适应其加载的内容高度

main.htm:                                 iframe自适应加载的页面高度                             child.htm:   ...
  • CJamie
  • CJamie
  • 2006年08月14日 10:01
  • 823

javascript应用:Iframe自适应其加载的内容高度

main.htm:                                 iframe自适应加载的页面高度                             child.htm:   ...
  • shaily
  • shaily
  • 2007年04月05日 12:58
  • 461

JavaScript应用:iframe自适应其加载的内容高度(zz)

在对台内网站进行重新设计时遇到了一个iframe问题:应用上面这样普通的iframe代码在内页高度大于设定的高度时会显示不完全(scrolling值为no),要么会产生拖拽条(scrolling值为y...
  • afxid
  • afxid
  • 2006年09月21日 00:41
  • 1361

JavaScript应用:Iframe自适应其加载的内容高度

main.htm:html>      head>         meta  http-equiv=Content-Type  content=text/html;  charset=gb2312 ...
  • lanwilliam
  • lanwilliam
  • 2008年12月04日 13:54
  • 525

Iframe自适应其加载的内容高度

重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”  之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就...
  • QQ282030166
  • QQ282030166
  • 2013年09月16日 11:06
  • 591

Iframe自适应其加载的内容高度

main.htm:                                 iframe自适应加载的页面高度                             child.htm:   ...
  • boy_north
  • boy_north
  • 2006年05月09日 10:19
  • 529
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript应用:Iframe自适应其加载的内容高度
举报原因:
原因补充:

(最多只允许输入30个字)