细说JavaScript BOM之window常用子对象-Toy模板网

这篇具有很好参考价值的文章主要介绍了细说JavaScript BOM之window常用子对象。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

细说JavaScript BOM之window常用子对象,JavaScript,Web专区,javascript,JsBom,JavaScript BOM

一、location

location翻译过来就是位置的意思，打开浏览器窗口大家可以看到导航栏上有一个URL地址。

// 例如 https://www.zhishunet.com

// 分心可知，它使用的网络协议是https 服务器名称是 www,zhishunet.com

location常用对象属性

属性	描述
search	设置或返回从问好(?)开始的URL
hash	设置或返回从#后面开始的URL
protocol	设置或返回当前URL的协议
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL
pathname	设置或返回当前URL的路径部分
port	设置或返回房钱URL的端口号

1、刷新当前页面

// 可以通过给location.href属性赋值的方式，使得浏览器根据获取到的新的指定的URL地址来刷新加载新地址

// 例子
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<button id="flush">点击刷新页面</button>
<script>
    var myBtn = document.getElementById('flush'); // 获取button按钮
    myBtn.onclick = function(){
        flush('https://www.zhishunet.com'); // 点击按钮触发调用flush方法
    }
    function flush(url){
        // 赋值url地址，实现页面刷新
        window.location.href = url;
    }
</script>
</script>
</body>
</html>

2、重新加载文档

// 使用location.reload()方法可以加载文档，需要注意reload()方法的参数设置，当为空或false时
// 在浏览器客户端执行reload(false)会先判断服务器端的文件是否发生改变
// 若发生改变就会从服务器端相应数据给客户端
// 若没发生改变就会直接从客户端的缓存中加载文档，当设置为true时会直接从服务器端相应文档给客户端

// 例子
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<button id="flush">点击刷新页面</button>
<script>
    var myBtn = document.getElementById('flush'); // 获取button按钮
    myBtn.onclick = function(){
        window.location.reload(); // 判断服务器上的文件是否发生改变
        window.location.reload(true); // 直接从服务器重新下载
    }
</script>
</script>
</body>
</html>

3、使用新文档替换旧文档

// 使用window.location.replace()方法可以实现用一个新文档替换旧文档

// 例子
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<button id="flush">点击刷新页面</button>
<script>
    var myBtn = document.getElementById('flush'); // 获取button按钮
    myBtn.onclick = function(){
        window.location.replace('http://www.zhishuseo.cn');  
    }
</script>
</script>
</body>
</html>

// 注意replace()方法指定URL替换当前缓存在历史记录中（客户端）的项目，
// 因此在使用replace()方法后不能通过点击“前进”或“后退”按钮来访问已经替换的URL
// 实际应用中刷新页面使用location.reload()或者location.go(0)方法来实现

4、加载新文档

// location.assign()方法通过加载URL指定的心的文档来实现页面跳转，不过assign()与replace()
// 区别在于，location.assign()可以点击“后退”按钮返回到上一个页面
// 与href的区别在于href属性是通过控制属性来实现页面跳转的

// 例子
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<button id="flush">点击刷新页面</button>
<script>
    var myBtn = document.getElementById('flush'); // 获取button按钮
    myBtn.onclick = function(){
        window.location.assign('https://www.zhishunet.com');
    }
</script>
</script>
</body>
</html>

二、navigator

假入你想查看浏览器信息怎么办？
navigator对象不仅包含了正在使用的navigator版本信息，也可以反当前使用的浏览器信息，这个对象和location对象一样，当js客户端运行时引擎自动创建的，可以直接使用。
navigator对象常用属性

属性	描述
appCodeName	返回浏览器代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回知名浏览器中是否启用Cookie的布尔值
onLine	返回知名系统是否处于脱机模式的布尔值,true代表在线
platform	返回运行浏览器的操作系统平台
userAgent	返回有客户机发送给服务器的ua头部值
appMinorVersion	返回浏览器的次级版本
cpuClass	返回浏览器系统的CPU等级
uesrlanguage	返回操作系统的自然语言设置
systemLanguage	返回操作系统使用的默认语言
browserLanguage	返回当前浏览器的语言

三、history

浏览器有一个历史记录，可以查看用户访问过的所有页面，这种将用户在浏览器中访问过的URL进行管理的操作就用到了history对象，history对象也是window对象的一部分

1、对象属性

想要知道浏览器历史列表中的URL数量，可以使用history.length属性

2、对象方法

2.1、window.history.back()

这个方法用于加载history列表中的前一个url，相当于浏览器的“后退”，注意history.back(-1)表示直接返回到最初的页面，并刷新整个页面，history.back(0)可以实现当前页面的刷新功能。、

2.2、window.history.forward()

这个方法用于加载history列表中的下一个url，相当于浏览器中的“前进”

2.3、window.history.go()

使用这个方法可以直接加载history列表中的具体页面
history.go(-1)相当于“后退”
history.go(1)相当于“前进”

四、screen

每个window对象的screen属性都引用一个screen对象。screen对象中存储着有关显示器屏幕的信息，js程序将利用这些信息来优化它们的输出来满足用户的显示需求。另外js程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间等操作。
screen对象常用属性文章来源地址https://www.toymoban.com/news/detail-803093.html

属性	描述
availHeight	返回显示屏幕的高度（除window任务栏之外）
availWidth	返回显示屏幕的宽度（除window任务栏之外）
height	返回显示屏幕的高度
windth	返回显示屏幕的宽度
pixelDepth	返回显示屏幕的颜色分辨率（比特每像素）