修改url,页面不刷新

1、设置锚点特性(以bootstrap中标签页的代码为例)

html:

 1 <div>
 2 
 3   <!-- Nav tabs -->
 4   <ul class="nav nav-tabs" role="tablist">
 5     <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" onclick="home()">Home</a></li>
 6     <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" onclick="profile()">Profile</a></li>
 7     <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab" onclick="message()">Messages</a></li>
 8     <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" onclick="setting()">Settings</a></li>
 9   </ul>
10 
11   <!-- Tab panes -->
12   <div class="tab-content">
13     <div role="tabpanel" class="tab-pane active" id="home">home</div>
14     <div role="tabpanel" class="tab-pane" id="profile">profile</div>
15     <div role="tabpanel" class="tab-pane" id="messages">message</div>
16     <div role="tabpanel" class="tab-pane" id="settings">setting</div>
17   </div>
18 
19 </div>

js:

 1 index.js:
 2 var currenturl = window.location.href;
 3 if(currenturl.indexOf('#')< 1) {
 4     window.location.href = currenturl + '#home';
 5 } else {
 6     var hreftype = window.location.hash;//#后面的字段
 7     $("a[href="+hreftype+"]").click();//触发此a的点击事件
 8 }
 9 
10 profile.js:
11 var currenturl = window.location.href;
12 if(currenturl.indexOf('#')< 1) {
13     window.location.href = currenturl + '#home';
14 } else {
15     var hreftype = window.location.hash;//#后面的字段
16     window.location.href = (currenturl.split("#"))[0]+'#profile';
17     
18 }

利用锚点方式切换,页面刷新,也会定位至指定的页面,但是如果页面内容过长,出现滚动条时,锚点会定位至点击的a元素,页面不置顶了。

2、利用history.pushState实现

 1 index.js:
 2 
 3 var currenturl = window.location.href;
 4 if(currenturl.indexOf('?')< 1) {
 5     window.location.href = currenturl + '?home';
 6 } else {
 7     var hreftype = window.location.search.substr(1);//?后面的字段
 8     $("a[href=#"+hreftype+"]").click();//触发此a的点击事件,注意字段拼接#
 9 }
10 
11 
12 profile.js:
13 
14 var currenturl = window.location.href;
15 var newUrl = (currenturl.split("?"))[0];
16 history.pushState('','',newUrl+'?profile');//前两个参数可省略

以上两种方式都能实现标签页刷新指向当前页面,不会跳至默认首页,url改变页面不会自动刷新,但第二种方法更符合实际效果;

url改变,页面不跳转:

(1)锚点特性,或者说hash值变化(ps:window.location.hash),不会导致页面刷新;

(2)使用pushState和replaceState,也不会导致页面刷新;

补充一下pushState与replaceState的知识:

两者都是html5的新特性,支持IE10以上,都有三个参数:

以history.pushState(state,title,url)为例:

(1)state:存储JSON字符串,可以用在popstate事件中。

(2)title:现在大多数浏览器不支持或者忽略这个参数,最好用null代替。

(3)url:任意有效的URL,用于更新浏览器的地址栏,并不在乎URL是否已经存在地址列表中。更重要的是,它不会重新加载页面。

两者的区别:

pushState()是在history栈中新建一个历史记录,而replaceState()是替换当前记录;

popState:

(1) popstate事件的state属性会包含历史项(history entry)状态对象(state object)的拷贝。

(2) 调用history.pushState()或history.replaceState()不会触发popstate事件。当浏览器做出动作时,才会触发该事件,如用户点击浏览器的回退按钮或者在Javascript代码中调用history.back();

window.onpopstate = function(e){

  console.log(e);

}

或者 window.addEventListener('popstate',function(e){

  console.log(e);

},false);

ajax请求后,浏览器点回退按钮是无法回退到ajax请求前的状态的,如果用pushState新增一个history记录,再用popstate进行页面回退,需要注意利用js控制点击事件(即非用户手动点击)时,需要判断是popstate导致的click事件还是用户手动点击的click事件,避免回退按钮需要点击多次才回退成功;(这里记忆尤新啊!!)

posted @ 2018-04-25 20:16  不落幕  阅读(12907)  评论(0编辑  收藏  举报