python切换前端的iframe页面_Iframe实现单页面多tab切换界面无刷新

项目需求：需要在原MVC项目上实现单页面多tab切换，局部刷新功能。

痛点：原MVC项目菜单栏使用的是a标签，利用a标签的href属性跳转到对应界面，所以导致每个界面都得重新加载一遍；项目早已上线 正常运转，大改框架代价比较大，只得另辟蹊径。

思路：通过点击菜单，动态增加Iframe,利用Iframe的src属性，将子页面与母板页结合，再通过控制Iframe的显隐，实现界面的切换，另外利用history增加路由管理功能。

原MVC项目上效果实现后，自己花时间整理了一版Html+Jq实现的例子，并整理出有关Iframe和history路由的有关知识点，还有一些实现过程中遇到的小坑，供大家参考！

废话少说，先上效果图

关于history方法，网上已经有很多解释了，本文Demo中主要使用了

window.history.pushState(state, title, url);

state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。可用它来传一些数据

title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。

url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

//监听浏览器前进后退事件

window.addEventListener("popstate", function (e) {

consol