一、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Router By Hash</title> </head> <body> <ul> <li><a href="#01">1</a></li> <li><a href="#02">2</a></li> <li><a href="#03">3</a></li> <li><a href="#04">4</a></li> </ul> <div> </div> </body> <script> window.onload = function () { (//将路由函数包裹在IIFE内防止污染全局作用域 function () { var Router = function () { this.routes = {}; this.curUrl = '/'; }; Router.prototype.init = function () { // 对路由的hash值进行监听，如果发生改变，则调用reloadPage()函数 // 这里的两个this 是不一样的，需要注意 window.addEventListener('hashchange', this.reloadPage.bind(this)); //bind()方法创建一个新的函数（称为绑定函数）, 当被调用时，将其this关键字设置为提供的值， //在这里，当触发hashchange事件，会调用Router.prototype.reloadPage方法，如果直接this.reloadPage()，这个this会指向全局对象 //因此这样将其绑定 }; // 调用reloadPage函数，实际上时执行routes[]()函数 Router.prototype.reloadPage = function () { //location.hash为#01，则this.curUrl为01，如果没找到，就为'/' this.curUrl = location.hash.substring(1) || '/'; this.routes[this.curUrl]();//this.router[01]()方法，在原型对象的map方法中创建 }; // 路由配置的规则 Router.prototype.map = function (key, callback) { this.routes[key] = callback; //this.router[01] = callback } //将其暴露出去 window.Router = Router; })(); var ORouter = new Router(); //初始化，当路由改变，执行以当前实例为调用对象的reloadPage方法 ORouter.init(); // 以下为路由配置的设置，形象的当做一个路由与调用函数的映射表也可以 ORouter.map('/', function () { var Osect = document.querySelector('div'); Osect.innerHTML = "0"; }); ORouter.map('01', function () { var Osect = document.querySelector('div'); Osect.innerHTML = "1"; }); ORouter.map('02', function () { var Osect = document.querySelector('div'); Osect.innerHTML = "2"; }); ORouter.map('03', function () { var Osect = document.querySelector('div'); Osect.innerHTML = "3"; }); ORouter.map('04', function () { var Osect = document.querySelector('div'); Osect.innerHTML = "4"; }); ORouter.map('05', function () { var Osect = document.querySelector('div'); Osect.innerHTML = "5"; }); } </script> </html>
iframe的问题
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Router By Hash</title> </head> <body> <ul> <li><span data-url="page1" href="javascript:void(0);">1</span></li> <li><span data-url="page2" href="javascript:void(0);">2</span></li> <li><span data-url="page3" href="javascript:void(0);">3</span></li> <li><span data-url="page4" href="javascript:void(0);">4</span></li> </ul> <div> <!-- 内容主体区域 --> <div style="padding:15px;height:100%; 100%;box-sizing:border-box;"> <iframe name="self_frame" id="self_frame" src="./page0.html" style="height:100%; 100%" frameborder="no" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe> </div> </div> </body> <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> <script> window.onload = function () { $('span').click(function(){ window.location.hash = $(this).data("url"); }); (//将路由函数包裹在IIFE内防止污染全局作用域 function () { var Router = function () { this.routes = {}; this.curUrl = '/'; }; Router.prototype.init = function () { // 对路由的hash值进行监听，如果发生改变，则调用reloadPage()函数 // 这里的两个this 是不一样的，需要注意 window.addEventListener('hashchange', this.reloadPage.bind(this)); //bind()方法创建一个新的函数（称为绑定函数）, 当被调用时，将其this关键字设置为提供的值， //在这里，当触发hashchange事件，会调用Router.prototype.reloadPage方法，如果直接this.reloadPage()，这个this会指向全局对象 //因此这样将其绑定 }; // 调用reloadPage函数，实际上时执行routes[]()函数 Router.prototype.reloadPage = function () { //location.hash为#01，则this.curUrl为01，如果没找到，就为'/' this.curUrl = location.hash.substring(1) || '/'; this.routes[this.curUrl]();//this.router[01]()方法，在原型对象的map方法中创建 }; // 路由配置的规则 Router.prototype.map = function (key, callback) { this.routes[key] = callback; //this.router[01] = callback } //将其暴露出去 window.Router = Router; })(); var ORouter = new Router(); //初始化，当路由改变，执行以当前实例为调用对象的reloadPage方法 ORouter.init(); // 以下为路由配置的设置，形象的当做一个路由与调用函数的映射表也可以 ORouter.map('/', function () { //$('#self_frame').attr('src', "./page1.html"); window.parent.document.getElementById("self_frame").contentWindow.location.replace("./page1.html"); }); ORouter.map('page1', function () { //$('#self_frame').attr('src', "./page1.html"); window.parent.document.getElementById("self_frame").contentWindow.location.replace("./page1.html"); }); ORouter.map('page2', function () { //$('#self_frame').attr('src', "./page2.html"); window.parent.document.getElementById("self_frame").contentWindow.location.replace("./page2.html"); }); ORouter.map('page3', function () { //$('#self_frame').attr('src', "./page3.html"); window.parent.document.getElementById("self_frame").contentWindow.location.replace("./page3.html"); }); ORouter.map('page4', function () { //$('#self_frame').attr('src', "./page4.html"); window.parent.document.getElementById("self_frame").contentWindow.location.replace("./page4.html"); }); } </script> </html>
解决办法就是
解决iframe 历史记录问题，就是更改src会生成历史记录，所以用替换方式修改iframe
iframe.contentWindow.location.replace(url)
不要写 iframe.contentWindow.src = url; 这个会留下历史记录，上面那种不会