HTML5无感加载新页面(下一页+非ajax+history.pushState)

朱雀 2022-09-12 11:55 177阅读 0赞

## 一、修改url，页面不刷新 ##

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

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

<div>
    
      
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" onclick="home()">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" onclick="profile()">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab" onclick="message()">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" onclick="setting()">Settings</a></li>
      </ul>
    
      
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">home</div>
        <div role="tabpanel" class="tab-pane" id="profile">profile</div>
        <div role="tabpanel" class="tab-pane" id="messages">message</div>
        <div role="tabpanel" class="tab-pane" id="settings">setting</div>
      </div>
    
    </div>

index.js:
    var currenturl = window.location.href;
    if(currenturl.indexOf('#')< 1) { 
        window.location.href = currenturl + '#home';
    } else { 
        var hreftype = window.location.hash;//#后面的字段
        $("a[href="+hreftype+"]").click();//触发此a的点击事件
    }
    
    profile.js:
    var currenturl = window.location.href;
    if(currenturl.indexOf('#')< 1) { 
        window.location.href = currenturl + '#home';
    } else { 
        var hreftype = window.location.hash;//#后面的字段
        window.location.href = (currenturl.split("#"))[0]+'#profile';
    
    }

### 案例2、利用history.pushState实现 ###

index.js:
    
    var currenturl = window.location.href;
    if(currenturl.indexOf('?')< 1) { 
        window.location.href = currenturl + '?home';
    } else { 
        var hreftype = window.location.search.substr(1);//?后面的字段
        $("a[href=#"+hreftype+"]").click();//触发此a的点击事件,注意字段拼接#
    }
    
    
    profile.js:
    
    var currenturl = window.location.href;
    var newUrl = (currenturl.split("?"))[0];
    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事件,避免回退按钮需要点击多次才回退成功；（这里记忆尤新啊！！）

## 来源：[博客园-不落幕：修改url，页面不刷新][-_url] ##

[-_url]: https://www.cnblogs.com/wuting/p/8946927.html