window.loction 中的 url 参数

发表于 | 分类于

生活中时常可以用到 url ，不论是跨页传参，给后端传值，亦或是取参数，这里记录一下各个参数，以方便以后参考。

WHATWG URL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│                                            href                                             │
├──────────┬──┬─────────────────────┬─────────────────────┬───────────────────────────┬───────┤
│ protocol │  │        auth         │        host         │           path            │ hash  │
│          │  │                     ├──────────────┬──────┼──────────┬────────────────┤       │
│          │  │                     │   hostname   │ port │ pathname │     search     │       │
│          │  │                     │              │      │          ├─┬──────────────┤       │
│          │  │                     │              │      │          │ │    query     │       │
"  https:   //    user   :   pass   @ sub.host.com : 8080   /p/a/t/h  ?  query=string   #hash "
│          │  │          │          │   hostname   │ port │          │                │       │
│          │  │          │          ├──────────────┴──────┤          │                │       │
│ protocol │  │ username │ password │        host         │          │                │       │
├──────────┴──┼──────────┴──────────┼─────────────────────┤          │                │       │
│   origin    │                     │       origin        │ pathname │     search     │ hash  │
├─────────────┴─────────────────────┴─────────────────────┴──────────┴────────────────┴───────┤
│                                            href                                             │
└─────────────────────────────────────────────────────────────────────────────────────────────┘
(请忽略字符串中的空格，它们只是为了排版需要)

window.loction

直接在 Chrome　中打印：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Location {
  ...
  // 属性部分
  hash: "#ja/en/%E3%83%9C%E3%83%BC%E3%83%AB", // 哈希值，即井号及后面的部分。
  host: "translate.google.cn", // 域名部分，包含端口。
  hostname: "translate.google.cn", // 域名部分
  href: "https://translate.google.cn/#ja/en/", // 完整链接
  origin: "https://translate.google.cn", // 协议加域名部分包括端口
  pathname: "/", // 请求服务器路径部分
  port: "", // 端口
  protocol: "https:", // 协议部分
  search: "", // url 中的参数部分，开头有一个 ？
  // 方法部分
  assign: f (), // 跳转页面
  reload: f (), // 刷新本页，参数为 true 时 强制从服务器加载页面，false 时从本地缓存加载。
  replace: f (), // 跳转链接，但新的链接不会保存到 history 中，不能使用后退按钮返回。
  toString: f (), // 返回整个 url 链接
}

  1. host 和 hostname 属性的区别就在于前者包含端口，后者不包含；

    1
    2
    3
    var url = '127.0.0.1:81';
    Location.host ;// '127.0.0.1:81'
    Location.hostname; // '127.0.0.1'

  2. hash （哈希值），即井号后的部分，

    • 注意井号后的部分会被浏览器认为是页面标识符（元素id 或 锚点（a 标签）的 name 值），不会发送到服务器。
    • 改变 # 不会刷新页面。
    • 改变 # 会改变浏览器访问历史。
    • window.location.hash 值可读写。
    • window.onhashchange 用来检测 hash 值变化事件。
    • 如果你想让 google 蜘蛛抓到 # 后的部分，可以在井号后加感叹号（#!）。

  3. origin 是协议加域名部分，但注意，ie 11 以下不支持此属性，你可以使用以下组合来代替：

1
location.protocol + location.host