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 (^_^)
经验总结，代码加工厂！