Iframe實現單頁面多tab切換界面無刷新

1. 項目需求：須要在原MVC項目上實現單頁面多tab切換，局部刷新功能。
2. 痛點：原MVC項目菜單欄使用的是a標籤，利用a標籤的href屬性跳轉到對應界面，因此致使每一個界面都得從新加載一遍；項目早已上線 正常運轉，大改框架代價比較大，只得另闢蹊徑。
3. 思路：經過點擊菜單，動態增長Iframe,利用Iframe的src屬性，將子頁面與母板頁結合，再經過控制Iframe的顯隱，實現界面的切換，另外利用history增長路由管理功能。

• 原MVC項目上效果實現後，本身花時間整理了一版Html+Jq實現的例子，並整理出有關Iframe和history路由的有關知識點，還有一些實現過程當中遇到的小坑，供你們參考！
• 廢話少說，先上效果圖

源碼鏈接（有詳細註釋，可根據實際需求修改，萬變不離其中）：https://github.com/xuqiaoba/Iframe-tab-router

關於history方法，網上已經有不少解釋了，本文Demo中主要使用了
window.history.pushState(state, title, url);

• state：一個與指定網址相關的狀態對象，popstate事件觸發時，該對象會傳入回調函數。若是不須要這個對象，此處能夠填null。可用它來傳一些數據
• title：新頁面的標題，可是全部瀏覽器目前都忽略這個值，所以這裏能夠填null。
• url：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。

//監聽瀏覽器前進後退事件
window.addEventListener("popstate", function (e) {
    console.log(e)
});

瀏覽器的前進後退功能實現後，當時就試着全局刷新了一下，結果。。。

這很正常，瀏覽器地址欄裏面不就是指向的這個子界面嘛。
因此我就想到了監聽「瀏覽器從新加載」事件

//監聽從新加載界面事件
window.onload = function (e) {     
    window.history.pushState({ id: 1, url: './Home.html', menuname:  '主界面' }, "title", './Home.html');
    window.location.reload()
}

最初我將監聽「瀏覽器從新加載」事件寫在了母板頁中，原本想着是，刷新界面，讓他回到「最初的摸樣」，先改變瀏覽器當前路由爲「Home.html」，讓後刷新當前界面，結果，路由有那麼一瞬間是改變了，但緊接着又變回子界面路由地址了，且界面顯示的仍是子界面。
當時有點懵了，不知道咋回事，百度一番，發現父界面刷新，其子界面也會被刷新，也就是說路由變的一瞬間是父級界面刷新了，但其子界面緊接着也跟着刷新了，因此路由立刻就改變成了Iframe裏面的src地址。
這是我就想着將「監聽從新加載界面事件」寫到每一個子界面中去，這下思路應該正確了吧。結果。。。

被「無限嵌套」了。這也正常，既然 子界面的src被重定向成「Home.html」 了，天然每一個子界面都跟母板頁長得同樣了呀。
再冷靜分析一波，須要判斷當前刷新的界面是母板頁仍是子界面，若是是母板頁，則執行 window.history.pushState({ id: 1, url:'./Home.html', menuname: '主界面' }, "title", './Home.html'); window.location.reload()，若是是子界面，則直接跳過。
這裏就用到了window.parent.father()方法，經過window.parent能夠調用到父級界面定義的方法"father()",若是在父級界面調用window.parent.father()則會拋出異常。這裏就巧妙的運用 try...catch...，完美解決這個問題。

//監聽從新加載界面事件(點擊瀏覽器按鈕刷新，會進catch，點擊菜單刷新，正常調用fj())
window.onload = function (e) {     
    try {
        window.parent.father()
    } catch (e) {
        window.history.pushState({ id: 1, url: './Home.html', menuname:  '主界面' }, "title", './Home.html');
        window.location.reload()
    }
}

歡迎交流，歡迎 Star (^_^)
經驗總結，代碼加工廠！