通过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://blog.csdn.net/helloxiaoliang/article/details/73850428

history.pushState无刷新改变url的更多相关文章

通过history.pushState无刷新改变url
通过history.pushState无刷新改变url 背景在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越 ...
使用ajax和history.pushState无刷新改变页面URL onpopstate（转）
Javascript代码 var htmlData1 = $.ajax( { url: "/getXXXResponse", async: false }).re ...
使用ajax和history.pushState无刷新改变页面URL
表现如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
使用ajax和history.pushState无刷新改变页面URL(转)
表现如果你使用chrome或者firefox等浏览器访问本博客.github.com.plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发 ...
使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)
在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大 ...
HTML5之pushstate、popstate操作history，无刷新改变当前url
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
HTML5无刷新修改URL
HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和 ...
HTML5无刷新修改Url,history pushState/replaceState
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...

随机推荐

Linux安全配置步骤简述
一.磁盘分区 1.如果是新安装系统,对磁盘分区应考虑安全性: 1)根目录(/).用户目录(/home).临时目录(/tmp)和/var目录应分开到不同的磁盘分区: 2)以上各目录所在分区的磁 ...
Vue项目启动后首页URL带的#该怎么去掉?
修改router的mode为history就可以 const router = new VueRouter({mode: 'history', routes: [...]}) 实际修改后需要注意修改a ...
wampserver修改端口号后，phpMyAdmin进不去，需要修改相关配置文件
一.修改Apache端口 1.在界面中选Apache,弹出隐藏菜单选项,打开配置文件httpd.conf: 2.找到 Listen 80: 3.将 80 改成 8080(当然自己也可以设定别的不使用的 ...
LeetCode（56）：合并区间
Medium! 题目描述: 给出一个区间的集合,请合并所有重叠的区间. 示例 1: 输入: [[1,3],[2,6],[8,10],[15,18]] 输出: [[1,6],[8,10],[15,18] ...
python接口自动化测试二十一：类和方法
# 类和方法 class Count(): def __init__(self, aaa, bbb): # 初始化 # 可以放公共的参数 print('实例化的时候,会执行init的内容') self ...
<转>用 Java 技术创建 RESTful Web 服务
转自:https://www.ibm.com/developerworks/cn/web/wa-jaxrs/#N1017E JAX-RS:一种更为简单.可移植性更好的替代方式 Dustin Amrhe ...
SqlServer索引碎片
1.产生碎片的操作通过sys.dm_index_physical_stats来查看,索引上的页不在具有连续性时就会产生碎片,碎片是索引上页拆分的物理结果. (1).插入操作: INSERT操作在聚集 ...
（canvas）两小球碰撞后的速度问题研究
这两天在研究canvas碰撞先把小球开始运动的图拿出来参考了一下别的的代码,在两个小球碰撞处理上,我觉得不完善怎么样处理才算完善呢,当然是要用高中物理学的动量守恒了和机械能守恒了机械能守恒我其 ...
Codeforces 286B Shifting (看题解)
Shifting 感觉这题被智力打击了.. 刚开始我想的是对于每个位置我们可以暴力找出最后的位置在哪里. 因为对于当前位置p, 在进行第x步操作时, 如果p % x == 1 则 p = p + x ...
jQuery如何退出each循环和如何退出function函数
1.在函数内部使用return false是跳出function; 2.在each的回调函数中使用return false,是跳出each循环;return true 进入下一个循环: 3.break ...

history.pushState无刷新改变url

背景

表现

使用

API

事件

参数

示例

实例

效果

源代码

更多

replaceState

window.location

#hash

最后

history.pushState无刷新改变url的更多相关文章

随机推荐

热门专题