window
window.name默认为’’
window常见属性
console
alert
setInterval
onload
addEventListener
resize
innerHeight 窗口高度
innerWidth 窗口宽度
location
文档就绪
window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。
执行顺序:
DOMContentLoaded >window.onload
window.resize
浏览器窗口大小改变触发
window.addEventlistener('resize',function(){
console.log(window.innerHeight) //输出窗口高度,没有单位
console.log(window.innerWidth) //输出窗口宽度,没有单位
})
this指向
全局作用域或者由function定义的普通函数this指向window
定时器内的this也指向window
调用对象内的函数(在对象内叫方法)this指向调用者(一般来说this指向该对象)
构造函数中的this指向当前构造出来的对象
url
location对象
location对象属性
location.pathname返回的路径中如果有中文,浏览器会将中文转码返回的内容以’/‘开头
location.search返回的内容以’?‘开头
location.hash返回的内容以’#'开头
location对象方法
setTimeout(function(){
location.assign('https://www.baidu.com') //跳转页面,与location.href='https://www.baidu.com'效果一致
location.replace('https://www.baidu.com') //替换当前页面,不能回退页面
location.reload() //刷新页面
},1000)
navigator对象
navigator 对象包含有关浏览器的信息,它有很多属性,我们最常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值。
根据不同机型机型进行相应跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
window.location.href = ""; //手机
} else {
window.location.href = ""; //电脑
}
history对象
window对象给我们提供了一个 history对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的URL。
延迟加载
let box=document.querySelector('.box')
console.log(box)
defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="./延迟加载.js"></script>
</head>
<body>
<div class="box">box</div>
</body>
</html>
async
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async src="./延迟加载.js"></script>
</head>
<body>
<div class="box">box</div>
</body>
</html>
defer与async区别
普通情况下
部分html加载,加载完毕开始解析js,js解析完毕就执行js,js执行完再把没加载完毕的html继续加载
defer
js在html加载过程中加载,html完全加载完再执行js
async
js在html加载过程中加载,html部分加载完,js开始执行(html、多个js文件执行完的顺序不是固定的,由cpu性能决定),js执行完再加载剩下的没加载完的html