这是我参与11月更文挑战的第16天,活动详情查看:2021最后一次更文挑战
location 对象
location 对象提供了与当前窗口中加载的文档有关的信息和一些导航功能。它既是 window 对象的属性,也是 document 对象的属性。
| 属性 | 说明 | 例子 |
|---|---|---|
| href | 返回当前加载页面的完整 URL | www.test.com |
| hash | 返回 URL 中的 hash(#号后跟零或多个字符) | #list |
| host | 返回服务器名称和端口号 | www.test.com:80 |
| hostname | 返回不带端口号的服务器名称 | www.test.com |
| port | 返回 URL 中指定的端口号,如果没有端口号返回空字符串 | 8080 |
| pathname | 返回 URL 中的目录和文件名 | /dictionary/ |
| protocol | 返回页面使用的协议 | http |
| search | 返回 URL 的查询字符串,以问号开头 | ?q=javascript |
1. 查询字符串参数
虽然 location.search 可以返回从问号到 URL 末尾的所有内容,但没有办法逐个查询其中的每个查询字符串的参数。
解析查询字符串,返回包含所有参数的一个对象:
function getQueryStringArgs() {
var qs = (location.search.length > 0 ? location.search.substring(1) : ""), // 去掉开头的问号
args = {},
items = qs.length ? qs.split("&") : [], // 取得每一项
item = null,
name = null,
value = null,
i = 0,
len = items.length;
for (i = 0; i < len; i++) {
item = items[i].split("=");
name = decodeURIComponent(item[0]); // 将已编码 URI 中所有能识别的转义序列转换成原字符
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
}
}
return args;
}
2. 位置操作
打开新 URL 并在浏览器的历史记录中生成一条记录可以使用 assign() 方法; window.location 和 location.href 都是调用 assign() 方法的,效果完全一样。
location.assign("http://www.123.com");
location.href("http://www.123.com");
window.location("http://www.123.com");
还可以使用 hash、search、hostname、pathname、port,详细用法请浏览Location 对象
以上方法都可以在历史记录中产生一条新纪录,可以通过“后退”按钮返回前一个页面,要禁用这种行为,使用 replace() 方法。
reload() 方法是重新加载当前显示的页面。
location.reload(); // 重新加载(可能从缓存中加载)
location.reload(true); // 重新加载(从服务器重新加载)
navigator 对象
navigator 对象通常用于检测显示网页的浏览器类型;
| 属性或方法 | 说明 |
|---|---|
| appCodeName | 浏览器的名称。通常是 Mozilla |
| appMinorVersion | 次版本信息 |
| appName | 完整的浏览器名称 |
| appVersion | 浏览器版本 |
| buildID | 浏览器编译版本 |
| cookieEnabled | 表示 cookie 是否启用 |
| cpuClass | cpu 类型 |
| javaEnabled() | 表示当前浏览器是否启用了 Java |
| language | 浏览器的主语言 |
| mimeTypes | 在浏览器中注册的 MIME 类型数组 |
| onLine | 表示浏览器是否连接到了因特网 |
| opsProfile | |
| oscpu | |
| platform | 浏览器所在的系统平台 |
| plugins | 浏览器中安装的插件信息的数组 |
| preference() | 设置用户的首选项 |
| systemLanguage | 系统的语言 |
| userAgent | 浏览器的用户代理字符串 |
| userLanguage | 操作系统的默认语言 |
| vendor | 浏览器的品牌 |
history 对象
history 对象保存用户上网的历史记录。出于安全方面的考虑,无法得知用户浏览过的 URL,但是可以实现页面的前进和后退。
使用 go() 方法可以实现历史记录任意跳转。
history.go(-1); // 后退一页
history.go(1); // 前进一页
history.go("111.com"); // 跳转到最近的 123.com 页面
back() 和 forward() 可以替代 go() 方法的后退和前进功能。
history.back();
history.forward();