1.window对象简介
（1）在JavaScript中，一个浏览器窗口就是一个window对象。
（2）一个窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象，document对象是window对象的子对象。
window对象的子对象分很多种：
| 子对象 | 说明 |
|---|---|
| document | 文档对象用于操作页面元素 |
| location | 地址对象用于操作URL地址 |
| navigator | 浏览器对象用于获取浏览器版本信息 |
| history | 历史对象用于操作浏览器历史 |
| screen | 屏幕对象用于操作屏幕的高度和宽度 |
注：一个窗口是一个window对象，这个窗口里边的HTML文件是一个document对象，window对象众多的子对象由于都是操作窗口的，所以称为BOM对象（浏览器对象类型）
- ECMAScript指的是基本语法
- DOM控制标签相关的内容
- BOM控制浏览器窗口相关的
2.新窗口的关闭与打开
（1）窗口关闭：
window.close()关闭当前的窗口
<body>
<a href="关闭窗口.html" target="_blank">新窗口</a>
<script>
btn.onclick=function(){
window.close(); //window是代表关闭当前的窗口
</script>
</body>
这里当我们点击新窗口时，会跳转新的窗口
<body>
<button type="button" id="btn">关闭窗口</button>
<script>
btn.onclick=function(){
window.close(); //window是代表关闭当前的窗口
</script>
</body>
当我们点击关闭窗口时，会返回上一个页面，关闭当前页面
（2）窗口的打开
打开窗口 window.open('链接地址');链接地址任意都可以
//相当于把打开的窗口存储到a内部
<body>
<button type="button" id="btn">打开窗口（百度）</button>
<script>
btn.onclick=function(){
window.open('https://www.baidu.com/');
</script>
</body>
当我们点击此按钮将会跳转百度这个窗口
当我们会使用如何关闭和打开新窗口，也可以绑定一个定时器设置多长时间去关闭窗口
<body>
<button type="button" id="btn">打开窗口(百度)</button>
<a href="关闭窗口.html" target="_blank">新窗口</a>
<script type="text/javascript">
btn.οnclick=function(){
// 打开窗口 window.open('链接地址');链接地址任意都可以
//相当于把打开的窗口存储到a内部
var a=window.open('https://www.baidu.com/');
//绑定一个定时器，设置时间去关闭窗口
setInterval(function(){
//关闭a窗口
a.close()
},1000) //设置为1秒钟后关闭也页面
}
<script>
<body>
3.弹出框（confirm）用法
设置一个按钮，点击的时候可以关闭窗口
关闭窗口之前会先弹出提示框，如果用户确认，就关闭窗口，否则不关闭
<body>
<button type="button" id="btn">点我有惊喜！！</button>
<script type="text/javascript">
btn.onclick=function(){ //绑定btn的点击事件
//弹出框
if(confirm('确认关闭窗口吗')){
//关闭窗口
window.close()
}
}
</script>
</body>
当我们点击的时候就会弹出确认框，如果点确定就会关闭窗口，取消则不会关闭
补充内容：
1.单次定时器，只执行一次就停止了
setTimeout（code，time）–> code:可以是一段代码可以是一个函数名； time：是时间单位为毫米，表示要过多长时间执行code里边的代码
clearTimeout() —>暂停定时器
var timer=window.setTimeout(function(){
console.log(111)
},1000)
//clearTimeout(定时器名字)停止单次定时器
clearTimeout(timer)
2.利用单次定时器，实现多次定时器的效果（利用函数内部调用函数）
function fn(){
setTimeout(function(){
console.log(1111);
fn();
},1000)
}
fn()
setInterval()和clearInterval()：
（1）语法1： setInterval(code,time):重复性的执行一段代码
参数code：可以是一段代码，可以是一个函数，也可以是一个函数名
参数time：是时间，单位为毫秒表示要过多长时间才执行code里边的代码
注：虽然和 setTimeout（）语法一样，但是不同的是 setTimeout（）只执行一次，然而setInterval()执行无数次
（2） 语法2： clearInterval(obj):取消
clearInterval()的执行
obj是clearInterval()方法返回的对象
3.函数与定时器写法区别
<script>
function fn(){
console.log(1111)
}
//fn是函数
//fn()是执行函数
setTimeout(fn,1000); //和原来的书写方式一样
setTimeout(fn(),1000) //函数后面加括号，会直接执行函数，定时器失效，就不会用到定时器
setTimeout("fn()",1000) //如果书写成函数的形式，直接加引号即可
</script>
3.history用法
- history.go(num)可以跳转页面 num值可以自定义 正值返回之后的页面 负值返回之前的页面
- history.go(-1)等价于与history.back() —>返回之前的页面
- history.go(1) 等价于history.forward() —>返回之后的页面
<button onclick="history.go(-1)">返回到上一级</button>
<button onclick="history.go(1)">返回到下一级</button>
<button onclick="history.back()">返回到上一级</button>
<button onclick="history.forward（）">返回到下一级</button>
<a href="07无缝滚动.html">窗口</a>
4.location（）用法
location.reload() --->刷新页面
<button onclick="location.reload()">刷新页面reload</button>
<script>
//js中的双引号和单引号使用方法一样，但是单引号内部不能使用单引号，双引号内部不能使用双引号，自身不能嵌套自身，但是双引号可以嵌套单引号
replace()是替换页面，跳转完回不去之前的页面
<button onclick="location.replace('https://www.bilibili.com/')">跳转页面replace</button>
assign()是在历史页面新增一条记录
<button onclick="location.assign('https://www.bilibili.com/')">跳转页面assign</button>
<button id="btn">跳转页面</button>
<script type="text/javascript">
btn.onclick=function(){
//location.href可以修改地址，直接使用新地址赋值即可
location.href='https://www.bilibili.com'
}
</script>
5.screen
屏幕对象用于操作屏幕的高度和宽度 (指的是电脑的显示屏分辨率)
<script type="text/javascript">
//screen指的是显示屏，是电脑显示屏
console.log('显示屏宽度'+screen.width);
console.log('显示屏高度'+screen.height);
console.log('可用宽度'+screen.availWidth);
console.log('可用高度'+screen.availHeight);//不包含导航条
</script>
6.navigator
浏览器对象用于获取浏览器版本信息
<script type="text/javascript">
console.log(navigator.appName);//检测当前浏览器的名字
console.log(navigator.appVersion); //检测当前的版本
</script>
补充：
7.document对象常用的方法
| 方法名 | 说明 |
|---|---|
| document.getElementById() | 通过id获取元素 |
| document.getElementsByTagName() | 通过标签获取元素 |
| document.getElementByClassName() | 通过class获取元素 |
| document.getElementByName() | 通过name获取元素 |
| document.write() | 输出内容 |
| document.writeln() | 输出内容并换行 |
喜欢本人博客的请点赞收藏，本人是一名正在学习前端的小郭同学，会多多更新！！
扫一扫
1348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
