项目需求：需要在原MVC项目上实现单页多标签切换和局部刷新功能。痛点：原MVC项目的菜单栏使用了a标签，通过a标签的href属性跳转到对应的界面，所以每个界面都要重新加载；另辟蹊径。思路：通过点击菜单，动态添加iframe，利用iframe的src属性，将子页面与主页面结合起来，然后通过控制iframe的显示和隐藏实现界面切换，利用history增加路由管理功能.原MVC项目的效果实现后，花时间整理了一个版本的Html+Jq实现示例，整理了关于iframe和历史路由的相关知识点，以及实现过程中遇到的一些小坑，供你参考！废话不多说，先上效果图源码链接（有详细注释，可根据实际需要修改，切勿留）：https://github.com/xuqiaoba/Iframe-tab-router关于history方法，网上已经有很多解释了，window.history.pushState(state,title,url);state：与指定URL相关的状态对象，主要用在本文的Demo中。当popstate事件被触发时，该对象将被传递到回调函数中。如果不需要这个对象，这里可以填null。可以用来传递一些数据title：新页面的标题，但是目前所有浏览器都忽略这个值，所以这里可以填null。url：新的URL，必须与当前页面同域。您浏览器的地址栏将显示此URL。//监听浏览器的前进后退事件window.addEventListener("popstate",function(e){console.log(e)});浏览器的前进后退功能实现后，我当时尝试全局刷新，结果是。..这是正常的，不是浏览器地址栏指向的子界面。于是想到了监听“browserreload”事件//监听reload界面事件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...完美解决了这个问题。//监听reload界面事件（点击浏览器按钮刷新，会进入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(^_^)经验总结，代码加工厂！
