<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页面里的
我今天遇到的情况是,i)和ii)这两种情况全都“赶上了”。研究了好一会,总算把相关的问题都解决了,现在总结一下。
现在我说明一下面的将要使用的三个文件:
1、A文件,网站首页,中间有一个width:450和heidth:260的。 iframe的ID是SellMoney 指向的文件就是B。
A文件部分代码:
"B" width="450" height="260" scrolling="" frameborder="0" hspace="0" vspace="0" id="SellMoney" allowTransparency="true">
2、B文件,一个数据列表,数据大约50行,每页30行,分为两页,宽度自动,高度(30行数据的实际高度)800px左右。
B文件部分代码:
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml">
"Content-Type" content="text/html; charset=gb2312" />
::::: 鼎天网游 :::::-收货列表
"transparent">
"100%" border="0" align="center" cellPadding="0" cellSpacing="1" id="listtable" valign="top" >
"90%" border="0" align="center" cellpadding="0" cellspacing="0">
3、C文件,中间中间有一个width:450和heidth:无限的。 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文件部分代码:
"B?<%= Request.ServerVariableS("QUERY_STRING") %>" width="450" frameborder="0" hspace="0" vspace="0" id="SellGold" allowTransparency="true">
解决方案一:
去掉文件开头的文档声明。
不使用"DOCTYPE "文档声明(详细代码在下面)的话很容易就过去了。但是不使用文档声明,一是代码不规范,二是不能获得文档的高度。 下面的代码执行的结果是pageHeight=160px;,而实际上B文件的高度(长度)是800px左右。
var pageHeight = (document.body.clientHeight?document.body.clientHeight:document.documentElement.clientHeight);
有关的文档声明:
<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页面打开之后,自动执行代码,横向滚动条自动消失。