iframe サブページにナビゲーション関数 code_html/css_WEB-ITnose を追加

使用iframe嵌套页面，并在页面中添加导航功能，iframe只适应高度

效果图如下图

主页面

          

                
            

主页面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
职业特长报表

< ;dd class="sideCatalog-item1" id="sideToolbar-item-0-4">
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( ）{Scrollnavlwithhtmlscroll（ "Broker"）; 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') ) {
$( ).removeClass("sideCatalogBtnDisable");
$( " #SidecataLog-Catalog").Hide ();
$ ("#Sidecatalogbtn").Addclass ("SidecataLogBtndisable"); NCTION Quickpositioning ( ID) {c document.GetelementByid (ID).ScrollIntoview ();
}
/* *
* 初期化イベント
*/
Function ScrollnavlwithhtmlScroll (name) Value st VAR WST = $ (Parent.Window). Scrolltop ();
// サイクル
を追加します (var I = 1; i & lt; = 8; i + +) {
// ローリングバーの位置判定
iF ($ ("#" + name + i).offset().top <= wst) {
$(" #sideToolbar-item-0-" + i).addClass("ハイライト");
vigation.css

.sideToolbar {
表示: ブロック;
位置: 固定;
上: 117ピクセル;
左: 970ピクセル;
}

#sideCatalog {
幅: 190ピクセル;
高さ: px;
overflow: hidden;
margin-bottom : 10px;
font-size: 14px;
font-family: 宋体;
line-height: 19px;
position:relative;
zoom: 1;
left: 10px;
}

#sideCatalogB tn {
幅: 45px ;
高さ: 45px;
表示: ブロック;
背景: 透明 URL(/images/img/sideToolbar.gif) 0 0
リピートなし;
カーソル: ポインタ;
margin-bottom: 5px;
位置: 相対的。
margin-left: 10px;
display: block;
}

.sideCatalogBtnDisable {
background: 透明な url(/images/img/sideToolbar.gif)
-104px 0 no-repeat !重要;
}

: focus {
outline: 0;
}

a:visited {
color: #136ec2;
}

a:hover {
text-decoration: Underline;
}

#sideToolbar-up {
表示: ブロック;
幅: 45px;
高さ: 45px;
margin-left: 10px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
背景: 透明な URL( /images/img/sidetoolbar.gif)
-1px -62px no-repeat; eaeaea;
border: 1pxソリッド #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;
幅: 10px;
高さ: 10px;
背景: 透明 URL(/images/img/sideToolbar.gif) 0
-199px no-repeat;
zoom: 1;
overflow: hidden;
}

#sideCatalog #sideCatalog-サイドバー .sideCatalog-sidebar-bottom {
bottom: 0;
}

#sideCatalog #sideCatalog-サイドバー .sideCatalog-sidebar-top,#sideCatalog #sideCatalog-sidebar .sideCatalog-sidebar-bottom
{
位置: 絶対;
左: -5px;
幅: 10px;
高さ: 10px;
背景: 透明 URL(/images/img/sideToolbar.gif) 0
-199px no-repeat;
ズーム: 1;
オーバーフロー: hidden;
}

#sideCatalog-updown {
position: 絶対;
width: 22px;
height: 50px;
right: 60px;
bottom: 160px;
z-index: 100;
}

#サイドカタログ-up {
width: 25px;
height: 25px;
cursor: pointer;
}
.sideCatalog-up-enable {
background: 透明な URL(/images/img/sideToolbar.gif)
-245 px -83px いいえ-repeat;
}

#sideCatalog-down {
width: 25px;
height: 25px;
cursor: pointer;
}

.sideCatalog-down-enable {
background: 透明な url(/images/img/sideTool)バー.gif)
-245px -108px no-repeat;
}

#sideCatalog-catalog {
高さ: 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 。ハイライトスパン.sideCatalog-dot {
高さ: 13px;
width: 18px;
background: 透明 URL(/images/img/sideToolbar.gif)
-271px -38px no-repeat;
left: -23px;
top: 3ピクセル;
}

.sideCatalog-item2 {
padding-left: 21px;
}

#sideCatalog span.sideCatalog-index1 {
color: #999;
font-weight: 太字;
font-family: Arial;
フォント-size: 14px;
padding-right: 5px;
}

#sideCatalog .sideCatalog-item1 a {
color: #555;
font-weight:old;
}

#sideCatalog .sideCatalog-item1 a,# SideCatalog .sideCatalog-item2 a {
text-decoration: none;
}

.sideCatalog-dot:hover {
background-position: 0 -245px;
}

.sideCatalog-dot {
position: 絶対;
高さ: 10px;
width: 6px;
font-size: 12px;
line-height: 12px;
background: 透明 URL(/images/img/sideToolbar.gif) 0
-222px;
左: px;
トップ: 4px;
cursor: pointer;
overflow: hidden;
}

#sideCatalogspan.sideCatalog-index2 {
color: #999;
font-family: Arail;
font-size: 14px;
padding -右: 5px;
}

#sideCatalog .sideCatalog-item2 a {
color: #666;
}

.sideCatalog-item2 .sideCatalog-dot {
background: 0;
}