JavaScript中的window对象详解

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()	输出内容并换行

喜欢本人博客的请点赞收藏，本人是一名正在学习前端的小郭同学，会多多更新！！

JavaScript中的window对象详解相关推荐

Javascript中的Document对象详解
Document对象详解 document 文挡对象 - JavaScript脚本语言描述 -------------------------------------------- ...
前端开发：JS中的Window对象详解
前言在前端开发过程中,关于全局对象的使用是非常常用的,其实每个JS环境中都一个全局对象,尤其是在实际开发过程中全局范围内创建任何变量都是这个全局对象的属性,且任何函数都是它的方法.在实际浏览器环境下 ...
【JavaScript 教程】ES6 中的 Promise对象详解
[JavaScript 教程]ES6 中的 Promise对象详解 1.Promise对象含义 promise是异步编程的一种解决方法. 所谓promise,简单说是一个容器,里面保存着某个未来才会 ...
JS window对象详解
JS window对象详解 1.window对象 2.窗口操作打开窗口关闭窗口 3.对话框 confirm prompt 4.定时器 setTimeout和clearTimeout setInte ...
JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的 ...
php 实现setinterval,JavaScript中setInterval的使用详解
相信很多大伙都知道JavaScript中setInterval的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象,也有很多小伙伴对此也只是知道setInterval的定义.也是一知半解,今天我 ...
Window对象详解
注:页面上元素name属性以及JavaScript引用的名称必须一致包括大小写否则会提示你1个错误信息 "引用的元素为空或者不是对象" --------------------- ...
javascript之window对象详解
window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clea ...
JavaScript window 对象详解
1. 概述 window对象指当前的浏览器窗口,它也是当前页面的顶层对象,即最高一层的对象,所有其他对象都是它的下属. 一个变量如果未声明,那么默认就是顶层对象的属性. // a是一个没有声明就直接 ...