完全搞定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页面里的

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:无限的

解决方案一:

去掉文件开头的文档声明。
不使用"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里定义bodywidth<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页面打开之后,自动执行代码,横向滚动条自动消失。

你可能感兴趣的:(html)