乐趣区

关于html:浏览器的HistoryLocationURL方法和属性概览

jiezi

History 对象

History 对象保留了以后窗口拜访过的所有页面网址。因为平安起因，浏览器不容许脚本读取这些地址，然而容许在地址之间导航。浏览器工具栏的“后退”和“后退”按钮，其实就是对 History 对象进行操作。

如果 URL 的锚点值（即 hash）变了，也会在 History 对象创立一条浏览记录。

属性 history.

  • length：以后窗口拜访过的网址数量（包含以后网页）。
  • state：History 堆栈最上层的状态值。通常是 undefined，即未设置。

办法 history.

  • back()：挪动到上一个网址，等同于点击浏览器的后退键。对于第一个拜访的网址，该办法无成果。
  • forward()：挪动到下一个网址，等同于点击浏览器的后退键。对于最初一个拜访的网址，该办法无成果。
  • go()：承受一个整数作为参数，以以后网址为基准，挪动到参数指定的网址，比方 go(1) 相当于 forward()，go(-1) 相当于 back()。如果参数超过理论存在的网址范畴，该办法无成果；如果不指定参数，默认参数为 0，相当于刷新以后页面。
  • pushState()：用于在历史中增加一条记录。不会触发页面刷新，只是导致 History 对象发生变化，地址栏会有反馈。如果 pushState 的 URL 参数设置了一个新的锚点值（即 hash），并不会触发 hashchange 事件。
  • replaceState()：用来批改 History 对象的以后记录，其余都与 pushState() 办法截然不同。

事件

  • popstate：每当同一个文档的浏览历史（即 history 对象）呈现变动时，就会触发 popstate 事件。仅仅调用 pushState() 办法或 replaceState() 办法，并不会触发该事件，只有用户点击浏览器倒退按钮和后退按钮，或者应用 JavaScript 调用 history.back()、history.forward()、history.go() 办法时才会触发。

Location 对象

Location 对象是浏览器提供的原生对象，提供 URL 相干的信息和操作方法。通过 window.location 和 document.location 属性，能够拿到这个对象。

属性

  • href：整个 URL。
  • protocol：以后 URL 的协定，包含冒号 :。
  • host：主机。如果端口不是协定默认的 80 和 433，则还会包含冒号 : 和端口。
  • hostname：主机名，不包含端口。
  • port：端口号。
  • pathname：URL 的门路局部，从根门路 / 开始。
  • search：查问字符串局部，从问号 ? 开始。
  • hash：片段字符串局部，从 # 开始。
  • username：域名后面的用户名。
  • password：域名后面的明码。
  • origin：URL 的协定、主机名和端口。
// 以后网址为 http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
location.protocol      // "http:"
location.host          // "www.example.com:4097"
location.hostname      // "www.example.com"
location.port          // "4097"
location.pathname      // "/path/a.html"
location.search        // "?x=111"
location.hash          // "#part1"
location.username      // "user"
location.password      // "passwd"
location.origin        // "http://user:passwd@www.example.com:4097"

这些属性外面，只有 origin 属性是只读的，其余属性都可写。

留神，如果对 href 写入新的 URL 地址，浏览器会立即跳转到这个新地址。经常用于让网页主动滚动到新的锚点。

location.href = '#top';
// 等同于
location.hash = '#top';

URL 的编码和解码

网页的 URL 只能蕴含非法的字符。非法字符分成两类：

  • URL 元字符：分号 ;，逗号 ,，斜杠 /，问号 ?，冒号 :，at @，&，等号 =，加号 +，美元符号 $，井号 #。
  • 语义字符：a-z，A-Z，0-9，连词号 -，下划线 _，点 .，感叹号 !，波浪线 ~，星号 *，单引号 '，圆括号 ()。

除了以上字符，其余字符呈现在 URL 之中都必须本义，将每个字节转为百分号 % 加上两个大写的十六进制字母。

URL 的编码 / 解码办法

JavaScript 提供四个 URL 的编码 / 解码办法：

  • encodeURI()：用于转码整个 URL。它的参数是一个字符串，代表整个 URL。它会将元字符和语义字符之外的字符，都进行本义。
  • encodeURIComponent()：用于转码 URL 的组成部分，会转码除了语义字符之外的所有字符，即元字符也会被转码。所以，它不能用于转码整个 URL。它承受一个参数，就是 URL 的片段。
  • decodeURI()：用于整个 URL 的解码。它是 encodeURI() 办法的逆运算。它承受一个参数，就是转码后的 URL。
  • decodeURIComponent()：用于 URL 片段的解码。它是 encodeURIComponent() 办法的逆运算。它承受一个参数，就是转码后的 URL 片段。

URL 构造函数

new URL(input[, base])：通过将 input 绝对于 base 进行解析，创立一个新的 URL 对象。

  • input：要解析的相对或绝对的 URL。如果 input 是相对路径，则须要 base。如果 input 是绝对路径，则疏忽 base。
  • base：如果 input 不是绝对路径，则为要解析的根本 URL。

url 对象

URL 实例的属性与 Location 对象的属性基本一致，返回以后 URL 的信息。

  • url.href：返回整个 URL
  • url.protocol：返回协定，以冒号 : 结尾
  • url.hostname：返回域名
  • url.host：返回域名与端口，蕴含 : 号，默认的 80 和 443 端口会省略
  • url.port：返回端口
  • url.origin：返回协定、域名和端口
  • url.pathname：返回门路，以斜杠 / 结尾
  • url.search：返回查问字符串，以问号 ? 结尾
  • url.searchParams：返回一个 URLSearchParams 实例，该属性是 Location 对象没有的
  • url.hash：返回片段辨认符，以井号 # 结尾
  • url.password：返回域名后面的明码
  • url.username：返回域名后面的用户名

URLSearchParams 对象

URLSearchParams 对象是浏览器的原生对象，用来结构、解析和解决 URL 的查问字符串（即 URL 问号前面的局部）。

它自身也是一个构造函数，能够生成实例。参数能够为查问字符串，起首的问号 ? 有没有都行，也能够是对应查问字符串的数组或对象。

// 办法一：传入字符串
let params = new URLSearchParams('?foo=1&bar=2');
// 等同于
let params = new URLSearchParams(document.location.search);

// 办法二：传入数组
let params = new URLSearchParams([['foo', 1], ['bar', 2]]);

// 办法三：传入对象
let params = new URLSearchParams({'foo' : 1 , 'bar' : 2});

实例办法

  • toString()：返回实例的字符串模式。

  • append()：用来追加一个查问参数。它承受两个参数，第一个为键名，第二个为键值，没有返回值。不会辨认是否键名曾经存在。

    let params = new URLSearchParams('?foo=1&bar=2');
params.toString()   // "foo=1&bar=2'

params.append('foo', 3);
params.toString()       // "foo=1&bar=2&foo=3"
  • delete()：用来删除指定的查问参数。承受键名作为参数。params.delete('bar');
  • set()：用来设置查问字符串的值。承受两个参数，第一个是键名，第二个是键值。如果是曾经存在的键，键值会被改写，否则会被追加。如果有多个同名键，set 会移除反复的键，只留一个。
  • get()：用来读取查问字符串外面的指定键。承受键名作为参数。第一，它返回的是字符串，如果原始值是数值，须要转一下类型；第二，如果指定的键名不存在，返回值是 null。如果有多个的同名键，get 返回地位最后面的那个键值。
  • getAll()：返回一个数组，成员是指定键的所有键值。承受键名作为参数。
  • sort()：对键进行排序，规定是依照 Unicode 码点从小到大排列。没有返回值。如果有两个同名的键，不会排序，而是保留原始的程序。
  • keys()：返回的是键名的遍历器。
  • values()：返回的是键值的遍历器。
  • entries()：返回的是键值对的遍历器。
  • forEach()：遍历每个键值对。
let params = new URLSearchParams('a=3&b=6')

params.forEach((value, key, params)=>{console.log(value, key); // 3 a  // 6 b
})

for (const name of params.keys()) {console.log(name);  // a  b
}

for (const name of params.values()) {console.log(name);  // 3  6
}

for (const name of params.entries()) {console.log(name);  // ['a', '3']  ['b', '6']
}
退出移动版