|
最近接手一个由前面一人留下的使用jquery的load加载网页的项目，说实话，前期懵逼，后期吐血，
客户有两个优化要求是：1、网页进退问题，左上角后退前进失效，直接退出到百度，2、页面加载新内容需要将网页定位到最顶部，以此记录一下遇到load的问题： 先说第二个问题，很好解决，关键跳转加入 $(window).scrollTop(0) ;即可； 第一个呢，说是问题也不是问题，说不大呢，也不小。load加载相当于在单页面中，但是他的登录是使用的window.location() 加载到主页的，问题就来了，用户说，点击几个板块之后，然后点网页回退，回退第一次没有#，第二次去进入页面，没有用户体验，多次尝试，网页方法也有，由于前一位同事是用的是 $('#content').load('ye1.html',functhion(){ xxxx })的方式，那么怎么解决呢，写了一个测试用例，直接代码，因为测试只测试了两个页面，所以需要更多页面串联，可能需要进一步测试，代码如下<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.1.min.js"></script> <style> div{ width: 150px ; height: 150px ; color: white ; background-color: #0d3349 ; margin: 20px } </style> </head> <body> <div style="display: flex"> <div onclick="f()">1这是主页，测试load</div> <div onclick="f()">1这是主页，测试load</div> <div onclick="f()">1这是主页，测试load</div> <div onclick="f()">1这是主页，测试load</div> <div onclick="f()">1这是主页，测试load</div> <div onclick="f()">1这是主页，测试load</div> </div> <div id="unit"></div> <div id="content" onclick="f()"></div> <script> function f() { $('#content').load('cs2.html' , function () { f1('cs1.html' , "goback()" ) }) } function goback() { //加载你可能需要的方法 } function f1(url , func) { if (window.history && window.history.pushState) { $(window).on('popstate', function () { /// 当点击浏览器的 后退和前进按钮 时才会被触发， window.history.pushState(url, url, url); $('#content').load(url , func) }); } window.history.pushState(url, url, url); window.onpopstate = function(e) { console.log(JSON.stringify(e.state)); } var _wr = function(type) { var orig = history[type]; return function() { var rv = orig.apply(this, arguments); var e = new Event(type); e.arguments = arguments; window.dispatchEvent(e); return rv; }; }; history.pushState = _wr('pushState'); history.replaceState = _wr('replaceState'); window.addEventListener('replaceState', function(e) { //console.log(e); //console.log('THEY DID IT AGAIN! replaceState 111111'); }); window.addEventListener('pushState', function(e) { //console.log(e); //console.log('THEY DID IT AGAIN! pushState 2222222'); }); } </script> </body> </html> |
|
公众号
