- 項目需求：需要在原MVC項目上實現單頁面多tab切換，局部刷新功能。
- 痛點：原MVC項目菜單欄使用的是a標籤，利用a標籤的hare屬性跳轉到對應界面，所以導致每個界面都得重新加載一遍；項目早已上線 正常運轉，大改框架代價比較大，只得另闢蹊徑。
- 思路：通過點擊菜單，動態增加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 (^_^)
經驗總結，代碼加工廠！