完全搞定iframe（框架）里的滚动条

最新推荐文章于 2022-12-13 15:34:24 发布

Ms.Yang

最新推荐文章于 2022-12-13 15:34:24 发布

阅读量2.2k

点赞数

分类专栏： html 文章标签：框架 iframe 滚动条

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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文件，网站首页，中间有一个width: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;
    /**//*width: 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文件，中间中间有一个width: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;
    width: 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>

Ms.Yang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
完全搞定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 (){doc
复制链接

扫一扫