html怎么添加子页面,在iframe子页面中添加导航功能代码_html/css_WEB-ITnose

在iframe子页面中添加导航功能代码_html/css_WEB-ITnose原创2016-06-24 11:45:240574

使用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="向下翻页">

导航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 <= 8; i++) {

// 判断滚动条位置

if ($("#" + name + i).offset().top <= wst) {

// 清除高亮

$('#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;

}

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理