window对象
js : ECMAScript对象（array，object,Math,Date） DOM(document) BOM
1.window对象 : 是js中的顶级对象, 所有的全局方法和属性都是window对象的成员
2. 只要是window对象的成员，使用时一律可以省略window
3. window对象有一个特殊的属性叫做top, 指向window本身 （变量名不能用top）
复制代码window对象的两个方法(打开与关闭网页)
打开窗口:window.open()
可以传值:url(路径),target与a标签target一致 _blank(默认值)打开一个新窗口 _self从当前窗口打开;feature 窗口大小 位置等
关闭窗口:window.close()
复制代码代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button class="btn1">打开新窗口</button>
<button class="btn2">关闭新窗口</button>
<script>
let btn1 = document.querySelector('.btn1')
let btn2 = document.querySelector('.btn2')
btn1.onclick = function () {
open('http://www.baidu.com', '_blank', 'width=300,height=300,top=300,left=300')
}
btn2.onclick = function () {
close()
}
</script>
</body>
</html>
复制代码加载事件与关闭事件
页面加载完dom树 和 外部资源后执行(当外部资源(例如超大图片)还没加载完毕时,我们的js就开始执行,此时我们就拿不到超大图的高宽;代码演示如下)
window.onload=function(){}
关闭页面时执行
window.onbeforeunload=function(){}
复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box">我是盒子
// 一张超大图
<img src="https://juejin.cn/post/mn.jpg" >
</div>
<script>
console.log(document.querySelector('img').scrollHeight) // 拿不到图片的大小
window.onload = function () {
// 与上面的结果不一致
console.log(document.querySelector('img').scrollHeight) // 图片大小
}
</script>
</body>
</html>
复制代码location对象
浏览器地址栏 url
location.href='https://juejin.cn/post/url' //跳转
location.assign('url')// 同上两者等价
location.replace('url')// 跳转(替换网页) 但不可返回
location.reload() // 刷新网页
复制代码代码演示
document.querySelector('.assign').onclick = function () {
location.assign('http://www.baidu.com') // 跳转网页 等价于 location.href
}
document.querySelector('.replace').onclick = function () {
location.replace('http://www.baidu.com') // 替换网页网页 不可回退
}
document.querySelector('.reload').onclick = function () {
location.reload() // 刷新网页 一般用于移动端
}
复制代码navigator对象
一般用来收集用户信息
console.log(navigator)//对象
console.log(navigator.userAgent)//用户代理： 用户设备信息+浏览器信息
screen
console.log(screen)// 获取屏幕分辨率
history对象
history.back() : 前进
history.forward() : 返回
history.go(数字) : 正数为前进负数为返回,0为刷新网页(可以一次性前进多个网页和返回多个网页)
复制代码© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
