zoukankan      html  css  js  c++  java
  • 完全搞定iframe(框架)里的滚动条

    iframe初始滚动条位置:

    <iframe id="aa" name="aa" src=" http://news.163.com"></iframe>
    <script>
    document.getElementById("aa").document.body.scrollTop = "500";
    </script>

     ——————————————————————————————————————

    滚动条始终在最下端:
    window.onload=function (){
    document.documentElement.scrollTop=parseInt(document.body.offsetHeight)-parseInt(document.documentElement.offsetHeight)+100;
    }
    /*上面的加100是因为取offsetHeight的值不是很准,所以自己改到准为止*/

    滚动条始终在最上端:
    window.onload=function(){
    document.documentElement.scrollTop=0;
    }

    ————————————————————————————————————————————

     ASP页面的,在你iframe所引用的页面加

     在你的文件前面加上
    <%
    response.redirect "#top"
    %>
    然后在要滚动的地方加上代码:
    <div align="center"><a name="top"></a>
    </div>

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

    说明:
    1、本文参考了网络上大量资料,本人在此深表感谢!
    2、本文假设读者,有一定的HTML、CSS、JS基础。
    3、本文讨论的目标是,通过A页面里的<iframe>标记引用B网页之后,在A页面上出现滚动条这种情况的几种解决办法。
    4、因为篇幅的关系,文章被分成了两部分。通常情况下,(一)就能解决你的问题,(二)将会深入探讨这个问题和相关的解决方案。
    5、如果你觉得我啰嗦,请直接从方案一开始读起。
    6、文档的附件里有各种解决方案的示例代码供大家下载,我尽量把每一种方案都放在一个独立的文件夹里面。(这是一个asp的case,里面可能会包含一些asp方面的代码。)
    7、解决问题的方法有两种:CSS和JS,本人倾向于使用JS这种方法。
    8、实际上遇到这种问题的时候,有两种情况:i)在A页面上iframe的大小固定,不允许延展(拉宽或拉长),但是B页面的内容比iframe长(也有宽的时候,本人实际工作中遇到长的时候比较多,本文也只讨论长的情况,宽的情况以此类推,把相应的height换成width就行了。ii)A页面上可以不限制iframe的长度,B页面的长度超过iframe的长度,B页面可能延展iframe的长度,通常B页面也会把A页面的长度自动给延展了。
    i)这种情况通常是用在网站首页、栏目首页这些地方,出现的次数比较多。
    ii)这种情况出现的比较少,我在使用网易邮箱“记事本”时发现网易邮箱的这种情况,研究之后用在了一个在线销售网站的产品评论上了(http://www.pplily.com/product_view.asp?id=1380)。评论的列表,放在<iframe>里面,根据一评论的多少,<iframe>的长度会跟着发生变化,整个网页的长度也要变化。
    9、示例代码下载:
    http://www.jqs0086.com/ncp/images/完全搞定iframe的滚动条!.rar


    我今天遇到的情况是,i)和ii)这两种情况全都“赶上了”。研究了好一会,总算把相关的问题都解决了,现在总结一下。

    现在我说明一下面的将要使用的三个文件:
    1、A文件,网站首页,中间有一个450和heidth:260的<iframe>。 iframe的ID是SellMoney  指向的文件就是B。
    A文件部分代码:

    <iframe src="B" width="450" height="260" scrolling="" frameborder="0" hspace="0" vspace="0" id="SellMoney" allowTransparency="true"></iframe>
    2、B文件,一个数据列表,数据大约50行,每页30行,分为两页,宽度自动,高度(30行数据的实际高度)800px左右。
    B文件部分代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <TITLE>::::: 鼎天网游 :::::-收货列表</TITLE>

    <STYLE type=text/css>...
    BODY {...}{
        FONT-SIZE: 12px;
        /**//* 430px;*/
        margin:0px;
        padding:0px;
    }
    HTML,BODY{...}{
    /**//*    overflow-x:hidden;
    */
    }
    TD {...}{
        FONT-SIZE: 12px;
    }
    TH {...}{
        FONT-SIZE: 12px;
    }
    </STYLE>

    </HEAD>
    <BODY bgColor="transparent">
    <TABLE width="100%" border="0" align="center" cellPadding="0" cellSpacing="1" id="listtable" valign="top"  >
      <TR>
        <TD>
        <!-- 这个地方是数据列表程序。 -->
        </TD>
      </TR>

    </TABLE>
    <TABLE width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
      <TR>
        <TD>
        <!-- 这个地方是分页程序。 -->
        </TD>
      </TR>
    </TABLE>
    </BODY>
    </HTML>
    <script language="JavaScript" type="text/javascript">...

    function expandWindow()...{
    //        try{
    //            var SellMoney=top.window.document.getElementById("SellMoney");
    //            var pageWidth = (document.body.clientWidth?document.body.clientWidth:document.documentElement.clientWidth);
    //            //SellMoney.style.height= pageWidth+0;
    //            alert(pageWidth);
    //            pageWidth = SellMoney.style.width-20;
    //        }catch(e){
    //            alert(e);
    //        }
        try...{
            var SellGold=top.window.document.getElementById("SellGold");
            var pageHeight = (document.body.clientHeight?document.body.clientHeight:document.documentElement.clientHeight);
            SellGold.style.height= pageHeight+0;
            //alert(pageHeight);
        }catch(e)...{
            //alert(e);
            window.status="不能展开。";
            try...{
                var SellMoney=top.window.document.getElementById("SellMoney");
                var pageHeight = (document.body.clientHeight?document.body.clientHeight:document.documentElement.clientHeight);
                //var pageWidth = (document.body.clientWidth?document.body.clientWidth:document.documentElement.clientWidth);
                var pageWidth = 400;
                if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
                ...{
                    //document.documentElement.clientWidth = pageWidth;
                    //这个属性是只读的。
                    //alert(document.documentElement.clientWidth);
                    pageWidth = document.documentElement.clientWidth;
                }
                else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
                ...{
                    //document.body.clientWidth = pageWidth;
                    pageWidth = document.documentElement.clientWidth;
                }   
                if(document.body)...{
                    document.body.style.width=pageWidth;
                }
    /**//*
    太不容易了,终于调过了!
    目标是为了引用页不出现滚动条!
    首先,不使用”!DOCTYPE “文档声明的话很容易就过去了。但是不使用文档声明,一是代码不规范,二是不能获得文档的高度。
    然后,是在css里定义body的width。但是这样就是固定了,也不太合适。
    再后,就是在Css里定义html和body的 overflow-x,这样的话,页面会被滚动条挡上一部分。

    同时我也在尝试用js来解决问题。
    开始的时候想给document.documentElement.clientWidth 付值但是没有成功。这个属性是只读的。
    其后查看“苏州小雨”的《DHTML手册》,验证了上面的猜测。
    最后,查看以前编写的其它代码,发现document.body.style.width这个是读/写属性的,尝试用document.body.style.width来付值,结果终于成功了。

    */
                //SellMoney.style.height= 450;
                //alert(pageHeight);
            }catch(e)...{
                //alert(e);
                window.status+=e;
            }
        }
    }

    window.onload=expandWindow;
    </script>
    3、C文件,中间中间有一个450和heidth:无限的<iframe>。 iframe的ID是SellGold指向的文件也是B。
    【注意 A文件iframe的ID是SellMoney  ,C文件是SellGold,】
    C文件的作用就是把B“包”起来,给B加上导航、登录框什么的。实际上也可以把B文件的代码直接加到C里面,但我现在A文件和C文件都通过iframe引用B,这样的话,就能偷懒了,而且美其名曰:“代码重用”。*_^
    C文件就是为了说明 ii )情况准备的,没有后台编程经验的朋友,可以不关注C文件和ii)这种情况。我也打算把ii)这种情况放到另一篇文章当中进行讨论。
    C文件部分代码:


    <iframe src="B?<%= Request.ServerVariableS("QUERY_STRING") %>" width="450" frameborder="0" hspace="0" vspace="0" id="SellGold" allowTransparency="true"></iframe>


    --------------------------------------------------------------------------------

    解决方案一:

    去掉文件开头的文档声明。
    不使用"DOCTYPE "文档声明(详细代码在下面)的话很容易就过去了。但是不使用文档声明,一是代码不规范,二是不能获得文档的高度。 下面的代码执行的结果是pageHeight=160px;,而实际上B文件的高度(长度)是800px左右。


    var pageHeight = (document.body.clientHeight?document.body.clientHeight:document.documentElement.clientHeight);

    --------

    有关的文档声明:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    ---------------

    解决方案二:
    在B文档的css里定义body的width<437。但是这样就是固定了,也不太合适。只能用在一个文件里,在另一个文件的iframe 可能宽达500、600,但是B文件却被挤压到450,页面的一边或者两条出现大块的空白。


    BODY {...}{
        FONT-SIZE: 12px;
        430px;/**//*就是这里了!*/
        margin:0px;
        padding:0px;
    }

    解决方案三:
    在B文件的CSS中使用overflow。
    使用overflow需要注意以下问题:
    1、使用overflow之前看看网页的开头没有没使用文档声明,如果使用了文档声明,那么必须同时定义HTML和BODY两个标记。
    2、overflow-x和overflow-y分别定义横向的滚动条和纵向的滚动条,但是它们是IE专有属性,只有在IE(4.0)以上的版本才能使用。
    3、overflow-x: hidden;使用之后,有可能会被纵向的滚动条挡住右边一部分内容。

    HTML,BODY{...}{
        overflow-x:hidden;
    }
    解决方案四:
    使用js代码自动调整B文件的宽度,B文件宽度减小之后,横向的滚动条自然就消失了。
    注意:
    1、代码里有两段函数都叫expandWindow,你实际上只需要选择其中一个就行了。这只是同一函数的不同版本,上面的版本,我详细说明了每行代码的作用,下面的版本,我简化了一下,显得干净一些。
    2、这段代码,是独立运行的,与A、C文件无关与A文件里的iframe的ID是什么也无关。这样的话,就与上面的“B文件部分代码”不完全一样了。“B文件部分代码”需要兼顾A、C两种情况,所以它的代码很复杂。
    3、通常情况下,只需要下面这段代码就能解决问题了。推荐您使用下面的代码!

    把下面的代码放到B文件(或者其它需要只显示纵向滚动条的网页)里,A网页打开之后,调用B网页,B页面打开之后,自动执行代码,横向滚动条自动消失。
    <script language="JavaScript" type="text/javascript">...
    //这是一个带说明的版本,后面还有一个非常干净的版本。
    function expandWindow()...{//这个函数能调整本页面的宽度
            try...{//使用try{}catch(d){}来捕捉错误,我不喜欢状态栏上那个黄色的惊叹号。
                var pageWidth = 400;//我们将要把网页的宽度改成pageWidth大小。为了防止意外,我暂时将宽度设置为一个比较小的数。
                if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
                ...{//看看能不能取得document.documentElement.clientWidth的大小。
                    //document.documentElement.clientWidth = pageWidth;
                    //我曾经想过直接修改这个属性,可惜这个属性是只读的,不能斌值。
                    //alert(document.documentElement.clientWidth);
                    pageWidth = document.documentElement.clientWidth;
                }
                else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
                ...{//尝试获得document.body.clientWidth。
                    //document.body.clientWidth = pageWidth;,这条也不行,同样是只读的。
                    pageWidth = document.documentElement.clientWidth;
                }   
                if(document.body)...{
                //尝试取得document.body,看看它是不是一个对象。如果它是一个对象object,那么就可以使用.width了。
                    if(document.body.style.width<pageWidth)...{//这时再检查一下,是我为了写这篇文章临时添加的。
                        document.body.style.width=pageWidth;//这个width是个读写的属性,修改它,网页的宽度就变了。
                    }
                }
                //alert(pageHeight);//调试程序用的,看看究竟页面被改成多大。
            }catch(e)...{//捕捉错误
                window.status+=e;//把错误显示在状态栏里
            }
    }
    //下面是一个简洁、干净的版本。
    function expandWindow()...{
        var pageWidth = 400;
        if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
        ...{
            pageWidth = document.documentElement.clientWidth;
        }
        else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
        ...{
            pageWidth = document.documentElement.clientWidth;
        }   
        if(document.body)...{
            document.body.style.width=pageWidth;
        }
    }
    window.onload=expandWindow;//当页面全部打开之后执行函数。
    </script>

  • 相关阅读:
    【Hive】HiveQL:数据定义
    【Hive】Hive安装与配置
    【Hadoop】Hadoop 2.7.6安装_伪分布式集群
    【RMAN】单实例环境RMAN备份和还原
    【SQL开发】Oracle 11g 分区技术
    【SQL开发】使用绑定变量 VS 不使用绑定变量
    MySQL索引最左前缀原则导致系统瘫痪
    阿里云RDS在线DDL工具gh-ost
    centos7下MongoDB3.4安装并解决告警
    ibtmp1文件过大
  • 原文地址:https://www.cnblogs.com/losesea/p/2534928.html
Copyright © 2011-2022 走看看