通过history.pushState无刷新改变url

背景

在浏览器中改变地址栏url，将会触发页面资源的重新加载，这使得我们可以在不同的页面间进行跳转，得以浏览不同的内容。但随着单页应用的增多，越来越多的网站采用ajax来加载资源。因为异步加载的特性，地址栏上的资源路径没有被改变，随之而来的问题就是页面的状态无法被保存。这导致我们难以通过熟悉的方式（点击浏览器前进/后退按钮），在前后的页面状态间进行切换。 为了解决ajax页面状态不能返回的问题，人们想出了一些曲线救国的方法，比如利用浏览器hash的特性，将新的资源路径伪装成锚点，通过onhashchange事件来改变状态，同时又避免了浏览器刷新。但这样始终显得有些hack。 现在HTML5规范为 window.history引入了两个新api，pushState 和 replaceState，我们可以使用它很方便的达到改变url不重载页面的目的。

表现

改变地址栏url，不刷新页面。 观察地址栏，可以看到当url路径由”join”改变为”login”时，页面状态也随之改变，但并没有造成背景图片等资源的重新加载。 此时”join”被压入历史栈，当点击浏览器后退按钮时仍然能够回到”join”状态。

使用

pushState与replaceState方法类似，都有改变当前地址栏URL的作用。主要区别在于pushState会在浏览器中创建一条新的历史纪录，而replaceState仅仅替换将当前地址为指定URL。 下面以pushState接口为例：

API

history.pushState(state, title[, url]);

事件

执行history.back()或history.forward()后触发  window.onpopstate事件

参数

state： 对象，可以存存放一些数据表示当前状态。当浏览器执行前进后退操作时触发onpopstate事件，state将成为event的子对象，可通过event.state获取先前状态。但是注意state中的属性值不能为引用类型对象，会报ObjectCloneError（对象克隆异常），例如允许{data:”test”}，不允许{data:document.querySelector(‘#testId’)}。 title：目前无特殊意义，一般可以传入 document.title 或 ”(空字符串)。 url：要替换的url，如果是pushState则会添加一条历史记录，不允许跨域。

示例

history.pushState({title:"login"}, "login", "fish/login");
window.addEventListener("popstate", function(event){
    if(event.state) {
        var state = event.state.title;
        switch(state) {
           case "login":.............;break;
           case "join" :.............;break;
           case "home" :.............;break;
        }
     }
}, false);

实例

下面以一个具体实例来展示pushState的作用，注意地址栏的变化。

效果

两次点击白色圆环改变页面背景，将在当前浏览器历史会话（window.history）中写入两条新记录：“/pushState.html?state=blue”和“/pushState.html?state=org”。 点击浏览器后退/前进按钮相当于执行history.back()与history.forward()方法，将触发onpopstate事件，通过监听onpopstate事件改变相应状态。

源代码

本实例在Chrome下编写调试，请在Chrome、Firefox、IE10+等现代浏览器中运行。

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="webkit" />
<head>
<title>pushState demo</title>
<style>
    body {
        font-family: "Microsoft YaHei";
        transition: background-color .3s;
    }
    .bg-org {
        color: #383c3c;
        background-color: #FF6633;
    }
    .bg-blue {
        color: #fbfaf5;
        background-color: #6699FF;
    }
    .time {
        margin-top: 20%;
        text-align: center;
        font-size: 4em;
        font-weight: 100;
    }
    .switch {
        margin: auto;
        width: 30px;
        height: 30px;
        position:absolute;
        bottom:25%;
        left:0;
        right:0;
        cursor:pointer;
        box-shadow: 0 0 0 5px rgba(255,255,255,.6);
        border-radius: 50%;
        transition: box-shadow .1s;
    }
    .switch:hover {
        box-shadow: 0 0 0 5px rgba(255,255,255,.75);
    }
    .switch:active {
        box-shadow: 0 0 0 30px rgba(255,255,255,.4);
    }
</style>
</head>

<body class="bg-org">
    <h1 id="time" class="time">Loading...</h1>
    <div id="switch" class="switch"></div>
    <script>
        var time = $(‘#time‘);
        function $(selector) {return document.querySelector(selector);}

        // 显示当前时间
        setInterval(function(){
            var date = new Date(),
                format = function(n) {return n<10?‘0‘+n:n};
            time.innerHTML = format(date.getHours()) + ‘ : ‘ + format(date.getMinutes()) + ‘ : ‘ + format(date.getSeconds());
        }, 500);

        $(‘#switch‘).addEventListener(‘click‘, toggleState, false);

        // 监听popstate事件
        history.pushState && window.addEventListener("popstate", function(e) {

            // 获取history.state对象中的状态信息
            // 在这里state将自动成为event的子对象，可直接通过event.state访问
            var flag = e.state && e.state.title;
            $(‘body‘).className = flag || ($(‘body‘).className==‘bg-org‘?‘bg-blue‘:‘bg-org‘);
        }, false);
        function toggleState(e) {
            var flag = $(‘body‘).className==‘bg-org‘?‘bg-blue‘:‘bg-org‘;

            // 新建历史记录，将当前状态信息保存至history.state中
            history.pushState && history.pushState({ title: flag }, flag, ‘pushState.html?state=‘+flag.split(‘-‘)[1]);
            $(‘body‘).className = flag;
        }
    </script>
</body>
</html>

更多

replaceState

前面曾说过，pushState和replaceState的区别在于pushState会在浏览器中创建一条新历史纪录，而replaceState仅替换当前地址。 我们将上面的实例稍作修改，观察replaceState的具体表现。 替换history.pushState为history.replaceState： 

history.pushState && history.replaceState({ title: flag }, flag, ‘pushState.html?state=‘+flag.split(‘-‘)[1]);

对比运行结果可以看到，多次执行replaceState仅改变当前地址栏的URL，而没有创建新的历史记录。

window.location

下面我们再使用传统的window.location跳转，对比与pushState的区别。 

<script>
    if(urlParam(‘state‘)==‘blue‘) {
        $(‘body‘).className = ‘bg-blue‘;
    } else {
        $(‘body‘).className = ‘bg-org‘;
    }

    var time = $(‘#time‘);
    function $(selector) {return document.querySelector(selector);}
    // 显示当前时间
    setInterval(function(){
        var date = new Date(),
            format = function(n) {return n<10?‘0‘+n:n};
        time.innerHTML = format(date.getHours()) + ‘ : ‘ + format(date.getMinutes()) + ‘ : ‘ + format(date.getSeconds());
    }, 500);

    $(‘#switch‘).addEventListener(‘click‘, toggleState, false);
    function toggleState(e) {
        var flag = $(‘body‘).className==‘bg-org‘?‘bg-blue‘:‘bg-org‘;
        window.location = location.pathname + ‘?state=‘ + flag.split(‘-‘)[1];
        $(‘body‘).className = flag;
    }

    /**
     * 获取url参数
     * @param  {String} name 参数名
     * @return {String}      参数值
     */
    function getUrlParam(name){
        var reg, value;
        reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        value = window.location.search.substr(1).match(reg);
        return value==null?null:decodeURI(value[2]);
    }
</script>

可以看到使用传统location跳转将会造成页面重载，虽然在功能上能够达到同样的目的，但在用户体验上将大打折扣。

#hash

最后再来介绍另一种无刷新技巧window.location.hash的使用。 URL中#称为位置的标识符，代表网页中的一个位置，当浏览器读取这个URL后，会自动将可视区域滚动至所定义的锚点处。HTTP请求中不包括#，也就是说改变#后的内容不会向服务器发起请求，因此也就不会引起页面重载。 window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。 当#值发生变化时，就会触发onhashchange事件。 

<script>
    var time = $(‘#time‘);
    function $(selector) {return document.querySelector(selector);}
    // 显示当前时间
    setInterval(function(){
        var date = new Date(),
            format = function(n) {return n<10?‘0‘+n:n};
        time.innerHTML = format(date.getHours()) + ‘ : ‘ + format(date.getMinutes()) + ‘ : ‘ + format(date.getSeconds());
    }, 500);

    // 监听onhashchange事件
    window.addEventListener("hashchange", function(e) {
        // 获取hash值判断页面状态
        var flag = location.hash && location.hash.substring(1);
        $(‘body‘).className = ‘bg-‘+flag || ($(‘body‘).className==‘bg-org‘?‘bg-blue‘:‘bg-org‘);
    }, false);
    $(‘#switch‘).addEventListener(‘click‘, toggleState, false);
    function toggleState(e) {
        var flag = $(‘body‘).className==‘bg-org‘?‘bg-blue‘:‘bg-org‘;

        // 在url中写入新的hash值
        location.hash = flag.split(‘-‘)[1];
        $(‘body‘).className = flag;
    }
</script>

需要注意的是每次hash发生变化时都会触发onhashchange事件。而onpopstate事件只会在历史记录(history entry)变化时触发，比如执行浏览器的前进/后退操作。

最后

本文介绍了pushState/ replaceState诞生的背景以及API的使用。又通过一个简单的实例与location，hash等技术进行了对比。相信大家已经可以很直观的看到pushState 和 replaceState的作用及区别。如有错误的地方欢迎交流指正。 随着HTML5标准的确定，pushState与ajax技术，将会在单页应用中发挥越来越重要的作用，国外也有一个叫pjax（pushState+ajax）的库将它们予以封装。

参考

  • https://developer.mozilla.org/zh-CN/docs/Web/Events/popstate
  • http://www.cnblogs.com/silin6/p/linkFly_pushState.html?utm_source=tuicool
  • http://www.cnblogs.com/yeer/archive/2013/01/21/2869827.html
时间： 2024-08-10 06:43:16

通过history.pushState无刷新改变url的相关文章

使用ajax和history.pushState无刷新改变页面URL

表现 如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器前进和后退. 是什么有这么强大的功能呢? HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的问题: 1.可以无刷新

使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="keywords" content="周记[学校晚会篇]" /><meta name="description

HTML5之pushstate、popstate操作history，无刷新改变当前url

pushState方法 一.认识window.history window.history 表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过 history 对象提供对览器历史记录的访问能力.它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退. 1.历史记录的前进和后退 在历史记录中后退,可以这么做: 1 window.history.back(); 这就像用户点击浏览器的后退按钮一样. 类似的,你可以前进,就像

HTML5新api即pushState和replaceState实现无刷新修改url

1,首先我面临一个需求,页面回退时需要知道来之前的页面状态.很简单,回退时在url里赋参数即可.问题是在ipad上,回退按钮是安卓那边的,我控制不了.只好采用js无刷新修改url历史记录,来告诉服务器我回去时要给我保持神秘状态. 先上代码,再解释这两个api. var url=window.location.href; var length=url.length; newur=url+"****"; history.replaceState(null, "",new

Html5无刷新修改Url

Html5无刷新修改Url,history pushState/replaceState (2014-03-01 01:11:20) 转载▼ 标签: it   一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通 过history对象提供对览器历史记录的访问能力.它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退. 1.历史记录的前进和后退 在历史记录中

HTML5实现无刷新修改URL

前言 今天在做一个vue的搜索功能,需要从搜索结果页面跳转到细节页面,然后点击返回还能返回到刚刚的结果页面,如果只用window.history.go(-1)当然会重新刷新搜索页面,当然是不行的. 我尝试了俩种方式来修改url: window.location.href,拼接一个搜索的key值,点击搜索的同时,刷新了页面,url改变了,功能是实现了,可是bug来了...,搜索页面闪烁后才进入结果页,而结合不跳转页面就不会发生闪烁的情况,所以当页面刷新时,vue实例都会被重新加载. window.

使用ajax实现无刷新改变页面内容

如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="p_tg.aspx.cs" Inherits="p_tg" %> 2 3 <!DOCTYPE html> 4 5 <html> 6 <head&

页面被iframe与无刷新更换url方法

页面被iframe问题解决方法 if (window.top.location !== window.self.location) { const data = JSON.stringify({ iframedRedirectSuccess: true }); window.top.location.href = addURLParam(window.self.location.href, 'data', data); } 页面初始化获取参数 import URL from 'url-parse

history.pushState 实现ajax无刷新更改url

暂时没啥心得,直接上例子. 1 <html> 2 <head> 3 <title> 4 fasd 5 </title> 6 <script> 7 window.addEventListener('popstate', function(e){ 8 if (history.state){ 9 var state = e.state; 10 console.log(state.title); 11 } 12 }, false); 13 14 func