看到网易音乐的无刷新浏览,于是也搞了一个,虽然有点小问题,勉勉OK.

流程

  • JS文件
var NengeNet = new class NengeApp{
  //用于解释HTML字符
  _DOM = new DOMParser();
  _FetchStateID = 0;
  _FetchStateData = {};
  _q    = d=>document.querySelector(d);
  _qAll = d=>document.querySelectorAll(d);
  //要替换的页面内容的ID / class
  _content = '#content';
  constructor(){
    //监听后退事件 可不用
      window.addEventListener('popstate',(e)=>{
          if(!this._FetchStateID) return;
          for (let index in this._FetchStateData) {
              const data = this._FetchStateData[index];
              console.log(history.state);
              if(data.url == location.href){
                  document.title = data.title;
                  this._q(this._content).innerHTML = data.page;
                  this._FetchStateID = data.state;
                  this.AddBind();
                  return ;
              }

          }
          location.reload();
      },false);
      this.AddBind();
  }
  AddBind(){
    //对连接进行事件绑定 并且数据处理
      if(!this._FetchStateData[this._FetchStateID])this._FetchStateData[this._FetchStateID]={
          'state':this._FetchStateID++,
          'page':this._q(this._content).innerHTML,
          'title':document.title,
          'url':location.href
      };
      this._qAll('#page a').forEach(
          elm=>{
              if(elm.onclick) return;
              if(elm.target=='_blank') return;
              if(!elm.href) return ;
              let myURL = new URL(elm.href);
              if(myURL.host == location.host&&this.Fetch_CheckURL(myURL.pathname)){
                  elm.onclick = event=>{
                      if(elm.href){
                              event.preventDefault();
                              event.stopPropagation();
                              fetch(elm.href).then(v=>v.text()).then(text=>{
                                  let html = this.parseHTML(text),page = html.querySelector(this._content);
                                  if(page){
                                      this._q(this._content).innerHTML = page.innerHTML;
                                      document.title = html.title;
                                      html = null,page=null;
                                      window.history.pushState({'pageid':this._FetchStateID},document.title,elm.href);
                                      this.AddBind();
                                      let Timer = setInterval(()=>{
                                          let Y = window.scrollY,_Y=Y*.5;
                                          if(Y<=0)return clearInterval(Timer);
                                          window.scrollTo(0,_Y<10?0:_Y);
                                      },50)
                                  }else{
                                      alert('页面打开失败');
                                  }
                              });
                      }
                  }
              }
          }
      );
    }
    Fetch_CheckURL(path){
      //过滤地址
        var re = [
            /^\/index\.php$/,
            /^\/$/,
            /\/\d+\//,
            /\/date\/\d+\/\d+\//,
            /\/category\/[^\/]+?\//

        ];
        for(var i =0;i<re.length;i++){
            if(re[i].test(path))return true;
        }
        return false;
    }
    parseHTML(text){//把字符解释成HTML
        return this._DOM.parseFromString(text,"text/html");
    }
}