最近一個專案使用了renren-security這個開源框架，先縱覽一下外觀，

嗯，確認過眼神，是傳統管理後臺的樣子~

使用過程中發現，當在導航欄中點選同一選單時，iframe並不會重新整理，其實這也不算個問題，奈何產品經理就要這個功能，只好看看人家原始碼是怎麼寫的了，很容易在index.js中就找到了控制路由的程式碼（真正的開源應當如此*^▽*）：

function routerList(router, menuList) {
    for (var key in menuList) {
        var menu = menuList[key];
        if (menu.type == 0) {
            routerList(router, menu.list);
        } else if (menu.type == 1) {
            router.add('#' + menu.url, function () {
                var url = window.location.hash;
                //替換iframe的url
                vm.main = url.replace('#', '');
                //導航選單展開
                $(".treeview-menu li").removeClass("active");
                $("a[href='" + url + "']").parents("li").addClass("active");
                vm.navTitle = $("a[href='" + url + "']").text();
            });
        }
    }
}
 

很明顯，這是一個遞迴演算法，將所有選單逐層“註冊”，通過menu.type來區分是父選單（無跳轉）還是子選單（需要跳轉），並對需要跳轉的子選單添加了回撥方法，觸發條件就是’#’ + menu.url。此時，大家應該明白為何點選同一選單不重新整理頁面了，因為瀏覽器中的連結跟’#’ + menu.url還是一致的，所以就不會觸發回撥。
找到了問題所在，那就好下手解決了，分兩步走：
1.同一選單也要觸發回撥
2.iframe的主動重新整理
我們發現替換iframe的url是window.location.hash，首先了解一下window.location.hash和window.location.href。
window.location.href：對應完整的url，可以跳轉頁面，也可以獲取連結
window.location.hash：獲取或設定錨鏈接，不會跳轉頁面
知道了以上，我們就能解決1了，在每次觸發回撥後將當前頁面的錨鏈接修改一下，這樣保證瀏覽器中的連結跟註冊的’#’ + menu.url不一致，那麼怎樣修改連結還能保持是同一個頁面呢？顯然，加時間戳引數：

window.location.hash=url+"?t="+new Date().getTime();

再來解決2，此時雖然點選同一選單都會觸發回調了，但是vm.main = url.replace(’#’, ‘’)取到的url始終是同一個，表現到頁面上就是，瀏覽器地址不斷在重新整理，但是iframe並沒有重新整理，所以我們需要主動重新整理iframe。
由於iframe是巢狀在index.html中的，這裡需要在父頁面來重新整理子頁面，給iframe一個定義一個id為childIframe，通過以下程式碼來重新整理iframe：

$("#childIframe")[0].contentWindow.location.reload(true)
 

如果你沒有用JQuery，也可以用原生寫法：

document.getElementById('childIframe').contentWindow.location.reload(true);

以上2步，就實現了點選同一選單也重新整理頁面的功能，但是在使用中發現，如果在一個iframe中通過window.location.href跳轉了新頁面，那麼再點選同一選單的時候，重新整理的是二級頁面，造成這個問題的原因很簡單，因為window.location.href已經改變了瀏覽器中的地址，vm.main得到的是二級頁面的地址，所以在跳轉二級頁面的時候，我們不使用window.location.href，而是給vm.main賦二級頁面的地址，並且重新整理iframe，此時雖然跳轉到了二級頁面，但是瀏覽器中的地址並沒有變化，再點選同一選單，自然會重新整理一級頁面。
在index.js中抽象出一個統一的跳轉方法：

function goNext(url) {
    vm.main = url;
    $("#childIframe")[0].contentWindow.location.reload(true);
}

在需要跳轉的地方通過parent物件來呼叫父頁面的這個goNext方法：

parent.goNext("modules/**/**.html?t="+new Date().getTime());

重新整合一下routerList方法：

function routerList(router, menuList) {
    for (var key in menuList) {
        var menu = menuList[key];
        if (menu.type == 0) {
            routerList(router, menu.list);
        } else if (menu.type == 1) {
            router.add('#' + menu.url, function () {
                var url = window.location.hash;
                   //替換iframe的url
                    goNext(url.replace('#', ''));
                   $(".treeview-menu li").removeClass("active");
                   $("a[href='" + url + "']").parents("li").addClass("active");
                   vm.navTitle = $("a[href='" + url + "']").text();
                   window.location.hash=url+"?t="+new Date().getTime();
            });
        }
    }
}