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>