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>

  • 相关阅读:
    angularjs的$on、$emit、$broadcast
    angularjs中的路由介绍详解 ui-route(转)
    ionic入门教程-ionic路由详解(state、route、resolve)(转)
    Cocos Creator 加载使用protobuf第三方库,因为加载顺序报错
    Cocos Creator 计时器错误 cc.Scheduler: Illegal target which doesn't have uuid or instanceId.
    Cocos Creator 构造函数传参警告 Can not instantiate CCClass 'Test' with arguments.
    Cocos Creator 对象池NodePool
    Cocos Creator 坐标系 (convertToWorldSpaceAR、convertToNodeSpaceAR)
    Cocos Creator 常驻节点addPersistRootNode
    Cocos Creator 配合Tiled地图的使用
  • 原文地址:https://www.cnblogs.com/losesea/p/2534928.html
Copyright © 2011-2022 走看看