自适应高度框架 ----属个人收藏内容

2016-02-19 10:52 2 1 收藏

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐自适应高度框架 ----属个人收藏内容,无聊中的都看过来。

【 tulaoshi.com - Web开发 】

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' /  
       titleiframe自适应加载的页面高度/title  
    /head  

    body
        diviframe src="child.htm"/iframe/div
    /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' /  
    titleiframe  自适应其加载的网页(多浏览器兼容)/title  
    script type="text/javascript"
    !--
    function iframeAutoFit()
    {
        try
        {
            if(window!=parent)
            {
                var a = parent.document.getElementsByTagName("IFRAME");
                for(var i=0; ia.length; i++) //author:meizz
                {
                    if(a[i].contentWindow==window)
                    {
                        var h1=0, h2=0;
                        a[i].parentNode.style.height = a[i].offsetHeight +"px";
                        a[i].style.height = "10px";
                        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 = a[i].parentNode.style.height = h +"px";
                    }
                }
            }
        }
        catch (ex){}
    }
    if(window.attachEvent)
    {
        window.attachEvent("onload",  iframeAutoFit);
        //window.attachEvent("onresize",  iframeAutoFit);
    }
    else if(window.addEventListener)
    {
        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
            tdiframe  自适应其加载的网页(多浏览器兼容,支持XHTML)/td
        /tr
    /table
/body  
/html

======================================

iframe标签的高度怎么样才能自适应src的页面?

例如:iframe id=box2 name="cok" src="agree.htm" width="100%" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" /iframe 

这个iframe的高度怎么能自适应agree.htm的高度600?
不要告诉我设为height=600,因为这个iframe要应用几个高度不同的页面!


谢谢,找到了
script
function autoResize()
{
try
{
document.all["test"].style.height=test.document.body.scrollHeight
}
catch(e){}
}
/script

iframe id=test style="height:expression(1); aho:expression(autoResize())" src=""/iframe

来源:https://www.tulaoshi.com/n/20160219/1595963.html

延伸阅读
如果我们想在3列布局的最后加一行页脚,放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中,我们用大表格嵌套小表格的方法,可以很方便对齐三列;而用div布局,三列独立分散,内容高低不同,就很难对齐。其实我们完全可以嵌套div,把三列放进一个div中,就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面): #pagebox {p...
标签: Web开发
在制作网页的过程中,自适应问题是经常遇到,而又最让人头疼的,看了好多种解决的方法,但是都不是万能的。今天遇到这个问题,实在让我挠头,借鉴了 Shark的方法,又给了我一个新思路。当时没仔细看LBS的样式表,今天才发现,.clear用的就是这个方法。接下来,我会做个关于自适应高度问题的汇总,以便今后遇到问题时候更快解决。 为了解决...
标签: Web开发
先说明,这个办法只限于iframe中的子页面也是本地页面(不能引用外网页面) ======方法===== 第一步 js部分 function getSize() {        var xScroll, yScroll;               if (window.in...
标签: Web开发
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title获取页面高度,窗口高度,滚动条高度等参数值/title /head body script language="javascript" !-- ...
  如果我们想在3列布局的最后加一行页脚,放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中,我们用大表格嵌套小表格的方法,可以很方便对齐三列;而用div布局,三列独立分散,内容高低不同,就很难对齐。其实我们完全可以嵌套div,把三列放进一个DIV中,就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面): 这...

经验教程

310

收藏

89
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部