zoukankan      html  css  js  c++  java
  • 路由无刷新实现方法

    前端路由主要实现了两个功能

    1.记录当前的页面,打开什么样,复制连接再打开还是什么样

    2.页面可以前进和后退

    有2中方法可以实现

    第一种 hash模式

    http://www.test.com#param1

    #param1这个就是hash,也叫锚点,用来做页面定位用。hash的更改会触发hashchange

    window.location.hash = 'param1';
    var hash = window.location.hash;
    window.addEventListener('hashchange', function(){ 
        // 监听hash变化,点击浏览器的前进后退会触发
    },false)
    或者
    <a name="print" href="#param1">
    

      

    第二种 html5的history

    html5的history兼任到ie10,但是可以记录的数据比较多。不会有#这个标志

    window.history.back() // 后退
    window.history.forward() // 前进
    window.history.go(1) // 前进一步,-2为后退两步,window.history.lengthk可以查看当前历史堆栈中页面的数量
    

     

    window.history.pushState({page: 1}, "title 1", "?page=1");
    
    window.history.replaceState(state, title, url)
    // 与 pushState 基本相同,但她是修改当前历史记录,而 pushState 是创建新的历史记录
    
    
    window.addEventListener("popstate", function() {
        // 监听浏览器前进后退事件,pushState 与 replaceState 方法不会触发              
    });
    

      

    其他的参考

    location参数值

    // 当前URL的协议,包括 :; 比如 https:     
    location.protocol   
    
    /* 主机名和端口号,如果端口号是80(http)或443(https), 那就会省略端口号,比兔 www.baidu.com:8080 */
    location.host  
    
    /*主机名*/
    location.hostname
    
    /*端口号*/
    location.port
    
    // url的路径部分,从 / 开始; 比如 https://www.baidu.com/s?ie=utf-8,那么 pathname = '/s'了
    location.pathname
    
    
    // 查询参数,从?开始;比如 https://www.baidu.com/s?ie=utf-8 那么 search = '?ie=utf-8'
    location.search
    
    // hash是页面中的一个片段,从 # 开始的,比如 https://www.baidu.com/#/a/b 那么返回值就是:"#/a/b"
    location.hash 
    

      

  • 相关阅读:
    Aptana在Eclipse的安装
    spket插件安装并设置JQuery自动提示(转)
    MyEclipse2014安装aptana插件
    GreenDao存储自定义类型对象解决方案(转)
    用PLSQL Developer 查看Oracle的存储过程
    用PLSQL Developer 查看连接因子 tnsnames.ora
    H5前端框架推荐合集 (转)
    10大H5前端框架(转)
    GreenDao3.0简单使用(转)
    Oracle常用查看表结构命令(转)
  • 原文地址:https://www.cnblogs.com/chenyi4/p/11357536.html
Copyright © 2011-2022 走看看