BOM(浏览器对象模型)的其他对象

145 阅读3分钟

这是我参与11月更文挑战的第16天,活动详情查看:2021最后一次更文挑战

location 对象

location 对象提供了与当前窗口中加载的文档有关的信息和一些导航功能。它既是 window 对象的属性,也是 document 对象的属性。

属性说明例子
href返回当前加载页面的完整 URLwww.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;
}

image.png

2. 位置操作

打开新 URL 并在浏览器的历史记录中生成一条记录可以使用 assign() 方法; window.locationlocation.href 都是调用 assign() 方法的,效果完全一样。

location.assign("http://www.123.com");
location.href("http://www.123.com");
window.location("http://www.123.com");

还可以使用 hashsearchhostnamepathnameport,详细用法请浏览Location 对象

以上方法都可以在历史记录中产生一条新纪录,可以通过“后退”按钮返回前一个页面,要禁用这种行为,使用 replace() 方法。

reload() 方法是重新加载当前显示的页面。

location.reload();  // 重新加载(可能从缓存中加载)
location.reload(true); // 重新加载(从服务器重新加载)

navigator 对象

navigator 对象通常用于检测显示网页的浏览器类型;

属性或方法说明
appCodeName浏览器的名称。通常是 Mozilla
appMinorVersion次版本信息
appName完整的浏览器名称
appVersion浏览器版本
buildID浏览器编译版本
cookieEnabled表示 cookie 是否启用
cpuClasscpu 类型
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();