window对象
window对象是全局对象,里面有很多可以用于前端交互的属性,下面将一一介绍。
1. screen 对象
screen对象可以获取到用户的屏幕信息,主要有以下四个通用属性,其他属性不同的浏览器支持度不同,所以就不作介绍了。
获取屏幕的宽高,
screen.width && screen.height
、widnow.screen.width && window.screen.height
。获取屏幕的可用宽高,
screen.availWidth && screen.availHeight
、widnow.screen.availWidth && window.screen.availHeight
。
2. location 对象
属性:
属性 | 描述 |
---|---|
href | 设置或返回完整的URL |
hash | 设置或返回从井号 (#) 开始的 URL(锚)。 |
host | 设置或返回主机名和当前 URL 的端口号。 |
hostname | 设置或返回当前 URL 的主机名。 |
pathname | 设置或返回当前URL的路径部分 |
port | 设置或返回当前URL的端口号 |
protocol | 设置或返回当前URL的协议 |
search | 设置或返回从问好(?)开始的URL,及查询部分 |
方法:
| 方法 | 描述 |
| ——– | ——————————————- |
| assign(url) | 加载新的文档 |
| reload(bool) | 重新加载当前文档 |
| replace(url) | 用新的文档替换当前文档(* 不会有history记录) |
3. History 对象
History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因,History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。history
又一个length
属性表示浏览器历史列表中浏览记录的数量。
方法:
方法 | 描述 |
---|---|
back(numer = 1) | 加载指向history中当前URL前number个URL |
forward(number = 1) | 加载指向history中当前URL后number个URL |
go(url) | 前往history中的某个具体页面 |
4. Navigator 对象
Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。Navigator 对象的实例是唯一的,可以用 Window 对象的 navigator 属性来引用它。不过一般不太常用,因为在http请求中,一般也都会有关于浏览器的常用属性。
具体属性见w3C: https://www.w3school.com.cn/jsref/dom_obj_navigator.asp
5. 其他常用的window属性与方法
属性:
属性 | 描述 |
---|---|
innerHeight、innerWidth | get文档显示区域的宽度和高度 |
pageXOffset、pageYOffset | set || get 页面相对窗口显示区域的x、y方向的位置 |
方法:
方法 | 描述 |
---|---|
setTimeout、clearTomeout | 在指定时间后加入事件队列 |
setInterval、clearInterval | 按照指定的时间,周期性的将内部的方法加入事件队列 |
scrollTo | 将内容滚动到指定的坐标 |
其实window
对象整体的知识点是简单的,关键是如何使用。比如常见的回退定位就是通过在前后两个页面中,通过url
中的query
信息传递的位置浏览页面的位置信息。而当用户回到浏览页面时,浏览页会从url
中拿到上一次进入页面的时候,已经浏览到的位置。然后将页面滚动到用户已经浏览到的位置。这样就可以实现回退定位的操作,提升用户体验。
还比如,setTimeout
其实是可以替代setInterval
,而且有的时候,setTimeout
代替setInterval
的效果要比它本身更好。因为setInterval
只是周期性向事件队列添加事件。但如果事件队列中已经有了这个setInterval
要添加的事件,那么setInterval
就不会再添加事件到事件队列里了。如果遇到复杂的计算并且周期又很短,就可能导致失帧。也就是说,有一些步骤的是不会加入到事件队列,从而丢失的。具体可以参考以这篇文章:https://juejin.im/post/5dac26206fb9a04dea5df84f
再比如,innerHeight
和innerWidth
可以让我们根据可以展示的区域的大小做一定的适配,规定一些基础宽度大小,比如html的font-size
的大小,从而达到响应式的效果。
下周计划,看完了you don’t know JavaScript yet的作用域这一块,所以下个周的内容应该是重点整理这个知识点。
原文作者: Billy & Barney
原文链接: https://liangbilin.github.io/2020/01/07/Barney--window对象/
版权声明: 转载请注明出处(必须保留作者署名及链接)