zoukankan      html  css  js  c++  java
  • 有趣的API: history pushState/popstate 无刷新跳转(pjax)

    API介绍

    首先看看API如何使用:

    • history.pushState(state, title, url) : 无刷新的向浏览器 历史最前方 加入一条记录。

      • state(any) 需要保存的数据,这个数据在触发popstate事件时保存在event.state上。

      • title(string):

      Firefox 目前忽略了這個參數,雖然他以後有可能會採用。如果以後改變了這個作法,傳送空白的字串應該還會是安全的。另外,你可以傳送一個短的標題來敘述你想要到的state。 
      目前没有发现有地方保存这个title,推测是state的说明?

      • url(string) 需要更改的url地址。

      • ps:pushState 需要至少两个参数。

    • popstate: 浏览器点击前进后退时触发的事件。event.state可以获取当前url下设置的state

    另外获取pushState中设置的state不一定要在popstate事件中获取,直接history.state也可以拿到。

    补充内容

    pjax

    pjax,利用ajax 和 pushState做成的和多页应用体验一致的SPA。github项目地址

    现代路由框架的H5模式。

    路由器的无刷新跳转也是利用该api完成的。另外,由于url变化,在用户复制分享时候由于路由未定义会出错,所以还需要服务端进行重定向处理。

    引用资料:

    1. 张鑫旭:ajax与HTML5 history pushState/replaceState实例

    2. mdn文档

  • 相关阅读:
    Git标签
    Git管理修改和撤销修改
    Git删除文件
    Git解决冲突
    Git的stash功能
    Git管理分支
    Git的多人协作模式
    Git相关指令
    LC7 整数翻转 + LC9 回文数
    LC1 两数之和
  • 原文地址:https://www.cnblogs.com/fps2tao/p/9316703.html
Copyright © 2011-2022 走看看