zoukankan      html  css  js  c++  java
  • HTML5: History API 无刷新更改地址栏

    HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转。

    简单来说:假设当前页面为renfei.org/,那么执行下面的 JavaScript 语句:

    window.history.pushState(null, null, "/profile/");

    之后,地址栏的地址就会变成renfei.org/profile/,但同时浏览器不会刷新页面,甚至不会检测目标页面是否存在。

    应用:全站 AJAX,并使浏览器能够抓取 AJAX 页面

    这个可以干啥用?一个比较常用的场景就是,配合 AJAX。

    假设一个页面左侧是若干导航链接,右侧是内容,同时导航时只有右侧的内容需要更新,那么刷新整个页面无疑是浪费的。这时我们可以使用 AJAX 来拉取右面的数据。但是如果仅仅这样,地址栏是不会改变的,用户无法前进、后退,也无法收藏当前页面或者把当前页面分享给他人;搜索引擎抓取也有困难。这时,就可以使用 HTML5 的 History API 来解决这个问题。

    思路:首先绑定click事件。当用户点击一个链接时,通过preventDefault函数防止默认的行为(页面跳转),同时读取链接的地址(如果有 jQuery,可以写成$(this).attr('href')),把这个地址通过pushState塞入浏览器历史记录中,再利用 AJAX 技术拉取(如果有 jQuery,可以使用$.get方法)这个地址中真正的内容,同时替换当前网页的内容。

    为了处理用户前进、后退,我们监听popstate事件。当用户点击前进或后退按钮时,浏览器地址自动被转换成相应的地址,同时popstate事件发生。在事件处理函数中,我们根据当前的地址抓取相应的内容,然后利用 AJAX 拉取这个地址的真正内容,呈现,即可。

    最后,整个过程是不会改变页面标题的,可以通过直接对document.title赋值来更改页面标题。

    参考来源:http://www.renfei.org/blog/html5-introduction-3-history-api.html

  • 相关阅读:
    codeforces 1343D(差分+思维)
    codeforces 1305C(鸽巢原理+同余)
    aa
    codeforces 1325D 位运算+思维
    Codeforces 1312D 组合数学
    Codeforces 1284C 组合数学
    Codeforces 1296C(map)
    CodeForces 1271B(思维)
    CodeForces 1281B(思维+暴力)
    HDU 1506(单调栈)
  • 原文地址:https://www.cnblogs.com/njqa/p/7000209.html
Copyright © 2011-2022 走看看