在iframe子页面中添加导航功能代码_html/css

집

웹 프론트엔드

HTML 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:45 AM

使用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;
}