我們在使用iframe時，一般是很多子頁面共用一個選單欄，然後點選不同選單切換到不同的子頁面，但是當你重新整理時可能會碰到跳轉到其他頁面的情況，這個時候就需要設定錨點來解決。
另外，我們還需要解決點選選單欄讓它處於高亮的選中狀態。並且在設定錨之後，還要處理如何在頁面重新整理後，讓動態生成的選單仍舊處於被選中的狀態。
我們看程式碼。

先設定錨點

/設定錨點
function setAnchor(url){
  var localHref = window.location.href;
  var endsub = localHref.indexOf("#");
  var afterUrl = localHref.substring(0
 
,endsub);
  window.location.href = afterUrl  +"#"+ url;
}

然後獲取錨點內容

window.onhashchange = function(){
    var hash = location.hash;
    hash = hash.substring(1,hash.length);
    //根據id在你的iframe中賦予
    $("#mainiframe").attr("src",url);

};

在頁面重新整理時進行url賦值操作和保持選單欄選中狀態

        document.addEventListener('DOMContentLoaded'
 
, function () {
            var hash;
            //當選單欄未點選，hash未賦值時，給它設定預設值為index,既登陸進來後跳轉到帶錨的首頁
            if(location.hash.length == 0){
                hash = index;
            }else{
                hash = location.hash;
            }
            var url = hash.substring(1,hash.length);
            if
 
(url != "index"){
                $("#mainiframe").attr("src", url);
            }
            //當頁面重新整理時給選單欄賦予當前頁面的選中狀態
            $("#navBar.nav li a").each(function(){
                if(url ==  $(this).attr("href").slice(1,$(this).attr("href").length)){
                    $(this).addClass("activate");
                }
            });
        }, false)

到此咱們就已經把設定後的錨點賦給了重新整理後iframe的url，關於下面這段程式碼：

  var hash;
            //當選單欄未點選，hash未賦值時，給它設定預設值為index,既登陸進來後跳轉到帶錨的首頁
            if(location.hash.length == 0){
                hash = index;
            }else{
                hash = location.hash;
            }
            var url = hash.substring(1,hash.length);
            if(url != "index"){
                $("#myiframe").attr("src", url);
            }

它的意義就是當你從登陸介面跳轉到預設頁時，咱們上面設定的hash是沒有值得，也就是說location.hash為空，所以就會出現從登陸頁跳轉過來後沒有子頁面的情況。所以咱們得加一個判斷，當它為空時給它賦予一個預設頁面的錨。

而關於下面這段程式碼：

  $("#navBar.nav li a").each(function(){
                if(url ==  $(this).attr("href").slice(1,$(this).attr("href").length)){
                    $(this).addClass("activate");
                }
            });
        }, false)

它的意義在於解決當頁面重新整理時，如果你的選單欄不是通過ajax動態生成的，而是通過類似python模板資料等非非同步方式來動態生成的，那麼你就需要在重新整理後給它賦予一個選中狀態。

而在開頭我們提到的點選選單欄切換選中狀態的js，如下程式碼：

 $("#navbar .nav li a").click(function(){
 var url = $(this).attr("href").slice(1,$(this).attr("href").length);
//在點選選單後獲取這個子頁面的url
  setAnchor(url);
   if(url){
            $("#navBar.nav li a").removeClass("activate");
            $(this).addClass("activate");
         }

    });

這是html部分的程式碼：

<div id="navBar">
  <ul id="navAdd" class="nav">
     <li><a href="/index">預設頁</a></li>
  </ul>
</div>