MDN 文档

• Location

获取当前页面的 url 信息

了解 什么是 URL?

URL(Uniform Resource Locator) 的缩写, 翻译为中文就是 统一资源定位符, 它是用于标识互联网上信息资源位置的一种标准格式, URL 提供了一种标准化的 方式来指定网络资源的位置

了解 URL 构成

有上图可以看到一个完整的 url 有以下几个小部分组成:

• protocol: 协议(如:http/https/ftp)
• user: 用户认证用户名(如:user1, 非必须)
• pass: 用户认真密码(如:pass2 非必须)
• hostname: 域名(如:www.baidu.com)
• port: 端口(如:8080, 非必须不同协议有默认的端口 http:80 https:443)
• pathname: 具体访问路径(如:/api/v1/users)
• query: GET 的请求参数(如:a=1&b=2)
• hash: 锚点(如: #head1)

http://user1:pass2@www.baidu.com:8080/api/v1/users?a=1&b=2#head1

多个部分组成构成另外一个名称:

• auth: username + pass(user1@pass2)
• host: hostname + port + path(www.baidu.com/api/v1/users)
• origin: protocol + auth + host(http://user1:pass2@www.baidu.com:8080/api/v1/users)
• search: ? + query(?a=1&b=2)
• path: pathname + search(/api/v1/users?a=1&b=2)

JS 获取浏览器当前访问的 URL 信息

// http://user1:pass2@www.baidu.com:8080/api/v1/users?a=1&b=2#head1
location.href;

// http
location.protocol;

// www.baidu.com/api/v1/users
location.host;

// 8080
location.port;

// www.baidu.com
location.hostname;

// a=1&b=2
location.pathname;

// ?a=1&b=2
location.search;

// #head1
location.hash;

// user1
location.username;

// pass2
location.password;

JS 操作浏览器访问指定的 URL

• window.open

// 让浏览器访问指定的 url, 并保留浏览器历史记录
// 注意二者有区别, window.open 支持更多参数
location.assign('https://github.com');
window.open('https://github.com');

// 让浏览器访问指定的 url, 但是不保留浏览器历史记录
// 那么也就是所, 点击回退按钮或者使用 history API
// 无法回退到这个页面
location.replace('https://gitlab.com');

// 重新加载 url(刷新), 注意 chrome 没有参数,
// 而 firefox 支持一个布尔类型的 forceGet 参数:
// location.reload(true) 表示强制从服务器获取资源,
// 不使用任何浏览器缓存
location.reload();

扩展: URL

主要是处理 url 字符串相关方法, 无法操作浏览器, 但是可以在 WebWorker 中使用 查看 MDN 文档 其中静态方法都是很常用的:

• canParse
• parse
• createObjectURL
• revokeObjectURL

扩展: URLSearchParams

主要是处理 url 字符串总的 search 部分(如: ?a=1&b=2), 同样可在 WebWorker 中使用 在处理一些复杂的请求 GET 请求参数, 很可能会用到URLSearchParams, 那么对应的在处理 POST 请求参数会用到 FormData

扩展: GeoLocation API

虽然名字和 Location 很像但是和 Location 没有任何关系, 主要是用于获取设备经纬度位置相关功能的 API 查看 MDN 文档