使用iframe嵌套页面，并在页面中添加导航功能，iframe只适应高度
效果图如下图
主页面
onload=iframeheights(); width=100%; frameborder=0
src=/a.jsp>
主页面js
//让iframe只适应高度
function iframeheights() {
var ifm = document.getelementbyid(rightiframepage);
ifm.height = 0;
var subweb = document.frames ? document.frames[rightiframepage].document : ifm.contentdocument;
if (ifm != null && subweb != null) {
ifm.height = subweb.body.scrollheight;
ifm.parentelement.style.height = subweb.body.scrollheight + px;
}
}
iframe页面a.jsp
style=visibility: visible;>
title=向下翻页>
1
城区报表
2
片区报表
3
职业特长报表
4
公司报表
5
房源数报表
6
资格认证报表
7
成交数报表
8
性别报表
导航js 代码
$(document).ready(function() {
//让iframe回到顶部
parent.scrollto(0,0);
inittitlenavigationevent(broker);
// 主页面滚动时，模仿position: fixed;这种功能，因为position: fixed;对于iframe子页面来说不起作用
$(parent.window).scroll(function() {
$('#sidetoolbar').css({
top : $(parent.window).scrolltop() + 116
});
// 滚动父页面滚动条时相应的切换导航位置，即让导航跟随页面滚动
scrollnavlwithhtmlscroll(broker);
});
});
/**
* 初始化事件
*/
function inittitlenavigationevent(name){
// 添加单击事件
$(#sidecatalog-catalog dl dd a).bind('click',{name : name}, function(e) {
var id = e.target.id.substring(e.target.id.lastindexof(-) + 1, e.target.id.length);
quickpositioning(e.data.name + id);
$(#sidecatalog-catalog dl dd).removeclass(highlight);
$(this).parent().addclass(highlight);
});
// 滚动到顶部
$(#sidetoolbar-up).bind('click', function(e) {
parent.scrollto(0,0);
});
// 显示或隐藏导航
$(#sidecatalogbtn).bind('click', function(e) {
if ($(this).hasclass('sidecatalogbtndisable')) {
$(#sidecatalog-sidebar).show();
$(#sidecatalog-updown).show();
$(#sidecatalog-catalog).show();
$(#sidecatalogbtn).removeclass(sidecatalogbtndisable);
} else {
$(#sidecatalog-sidebar).hide();
$(#sidecatalog-updown).hide();
$(#sidecatalog-catalog).hide();
$(#sidecatalogbtn).addclass(sidecatalogbtndisable);
}
});
}
/**
* 滚动到指定位置
* @param id 位置id
*/
function quickpositioning(id){
document.getelementbyid(id).scrollintoview();
}
/**
* 导航跟随页面滚动
*/
function scrollnavlwithhtmlscroll(name){
// 滚动条距离顶端值
var wst = $(parent.window).scrolltop();
// 加循环
for (var i = 1; i // 判断滚动条位置
if ($(# + name + i).offset().top // 清除高亮
$('#sidecatalog-catalog dl dd').removeclass(highlight);
// 给当前导航加高亮
$(#sidetoolbar-item-0- + i).addclass(highlight);
} else {
break;
}
}
}
css文件 titlenavigation.css
.sidetoolbar {
display: block;
position: fixed;
top: 117px;
left: 970px;
}
#sidecatalog {
width: 190px;
height: 355px;
overflow: hidden;
margin-bottom: 10px;
font-size: 14px;
font-family: 宋体;
line-height: 19px;
position: relative;
zoom: 1;
left: 10px;
}
#sidecatalogbtn {
width: 45px;
height: 45px;
display: block;
background: transparent url(/images/img/sidetoolbar.gif) 0 0
no-repeat;
cursor: pointer;
margin-bottom: 5px;
position: relative;
margin-left: 10px;
display: block;
}
.sidecatalogbtndisable {
background: transparent url(/images/img/sidetoolbar.gif)
-104px 0 no-repeat !important;
}
a:focus {
outline: 0;
}
a:visited {
color: #136ec2;
}
a:hover {
text-decoration: underline;
}
#sidetoolbar-up {
display: block;
width: 45px;
height: 45px;
margin-left: 10px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
background: transparent url(/images/img/sidetoolbar.gif)
-1px -62px no-repeat;
}
#sidecatalog #sidecatalog-sidebar {
top: 0;
width: 0;
height: 353px;
background-color: #eaeaea;
border: 1px solid #eaeaea;
border-top: 0;
border-bottom: 0;
position: absolute;
left: 5px;
}
#sidecatalog #sidecatalog-sidebar .sidecatalog-sidebar-top {
top: 0;
cursor: pointer;
}
#sidecatalog #sidecatalog-sidebar .sidecatalog-sidebar-top,#sidecatalog #sidecatalog-sidebar .sidecatalog-sidebar-bottom
{
position: absolute;
left: -5px;
width: 10px;
height: 10px;
background: transparent url(/images/img/sidetoolbar.gif) 0
-199px no-repeat;
zoom: 1;
overflow: hidden;
}
#sidecatalog #sidecatalog-sidebar .sidecatalog-sidebar-bottom {
bottom: 0;
}
#sidecatalog #sidecatalog-sidebar .sidecatalog-sidebar-top,#sidecatalog #sidecatalog-sidebar .sidecatalog-sidebar-bottom
{
position: absolute;
left: -5px;
width: 10px;
height: 10px;
background: transparent url(/images/img/sidetoolbar.gif) 0
-199px no-repeat;
zoom: 1;
overflow: hidden;
}
#sidecatalog-updown {
position: absolute;
width: 22px;
height: 50px;
right: 60px;
bottom: 160px;
z-index: 100;
}
#sidecatalog-up {
width: 25px;
height: 25px;
cursor: pointer;
}
.sidecatalog-up-enable {
background: transparent url(/images/img/sidetoolbar.gif)
-245px -83px no-repeat;
}
#sidecatalog-down {
width: 25px;
height: 25px;
cursor: pointer;
}
.sidecatalog-down-enable {
background: transparent url(/images/img/sidetoolbar.gif)
-245px -108px no-repeat;
}
#sidecatalog-catalog {
height: 325px;
padding-left: 23px;
overflow: hidden;
margin-top: 18px;
position: relative;
}
#sidecatalog-catalog dl {
position: relative;
}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td
{
margin: 0;
padding: 0;
}
.sidecatalog-item1,.sidecatalog-item2 {
position: relative;
padding: 0 7px;
zoom: 1;
margin: 0 0 6px 0;
}
#sidecatalog .highlight span.sidecatalog-dot {
height: 13px;
width: 18px;
background: transparent url(/images/img/sidetoolbar.gif)
-271px -38px no-repeat;
left: -23px;
top: 3px;
}
.sidecatalog-item2 {
padding-left: 21px;
}
#sidecatalog span.sidecatalog-index1 {
color: #999;
font-weight: bold;
font-family: arial;
font-size: 14px;
padding-right: 5px;
}
#sidecatalog .sidecatalog-item1 a {
color: #555;
font-weight: bold;
}
#sidecatalog .sidecatalog-item1 a,#sidecatalog .sidecatalog-item2 a {
text-decoration: none;
}
.sidecatalog-dot:hover {
background-position: 0 -245px;
}
.sidecatalog-dot {
position: absolute;
height: 10px;
width: 6px;
font-size: 12px;
line-height: 12px;
background: transparent url(/images/img/sidetoolbar.gif) 0
-222px;
left: -20px;
top: 4px;
cursor: pointer;
overflow: hidden;
}
#sidecatalog span.sidecatalog-index2 {
color: #999;
font-family: arail;
font-size: 14px;
padding-right: 5px;
}
#sidecatalog .sidecatalog-item2 a {
color: #666;
}
.sidecatalog-item2 .sidecatalog-dot {
background: 0;
}