JavaScript(JS)window简介

39279 阅读 0 评论 176 点赞

上一章我们详细讲解了JS中内置的基本对象，本章我们将学习JS中的window对象。

本节我们开始认识Window对象，包括它的结构和一些常见的使用场景。

我们知道，window和Location、Navigator、History、Screen是BOM的一些核心对象，Window的结构如下：

Window (浏览器窗口实例 - 全局对象)
│
├──  浏览器环境属性
│   ├── window.self (返回窗口自身引用)
│   ├── window.name (窗口名称)
│   ├── window.closed (窗口是否关闭)
│   ├── window.opener (打开此窗口的窗口引用)
│   ├── window.parent (父窗口，iframe中使用)
│   ├── window.top (最顶层窗口)
│   └── window.frames (子框架集合)
│
├──  窗口尺寸和位置
│   ├── window.innerWidth / window.innerHeight (视口尺寸，包含滚动条)
│   ├── window.outerWidth / window.outerHeight (整个窗口尺寸)
│   ├── window.screenX / window.screenY (窗口相对于屏幕的位置)
│   ├── window.pageXOffset / window.pageYOffset (页面滚动位置)
│   ├── window.scrollX / window.scrollY (滚动位置，pageXOffset别名)
│   └── window.devicePixelRatio (设备像素比)
│
├──  定时器方法
│   ├── window.setTimeout(callback, delay)
│   ├── window.setInterval(callback, delay)
│   ├── window.clearTimeout(timeoutID)
│   └── window.clearInterval(intervalID)
│
├──  导航和URL (Location)
│   ├── window.location.href (完整URL)
│   ├── window.location.protocol (协议 http: / https:)
│   ├── window.location.host (主机名+端口)
│   ├── window.location.hostname (主机名)
│   ├── window.location.port (端口)
│   ├── window.location.pathname (路径)
│   ├── window.location.search (查询参数 ?key=value)
│   ├── window.location.hash (锚点 #section)
│   ├── window.location.origin (源)
│   ├── window.location.assign(url) (跳转)
│   ├── window.location.replace(url) (替换当前页)
│   └── window.location.reload() (重新加载)
│
├──  浏览历史 (History)
│   ├── window.history.length (历史记录数量)
│   ├── window.history.back() (后退)
│   ├── window.history.forward() (前进)
│   ├── window.history.go(n) (前进/后退n步)
│   ├── window.history.pushState(state, title, url) (添加历史记录)
│   └── window.history.replaceState(state, title, url) (替换当前历史记录)
│
├──  浏览器信息 (Navigator)
│   ├── window.navigator.userAgent (用户代理字符串)
│   ├── window.navigator.platform (操作系统平台)
│   ├── window.navigator.language (浏览器语言)
│   ├── window.navigator.cookieEnabled (Cookie是否启用)
│   ├── window.navigator.onLine (是否在线)
│   ├── window.navigator.geolocation (地理位置API)
│   ├── window.navigator.clipboard (剪贴板API)
│   └── window.navigator.mediaDevices (媒体设备)
│
├──  屏幕信息 (Screen)
│   ├── window.screen.width / window.screen.height (屏幕分辨率)
│   ├── window.screen.availWidth / window.screen.availHeight (可用区域)
│   ├── window.screen.colorDepth (颜色深度)
│   ├── window.screen.pixelDepth (像素深度)
│   └── window.screen.orientation (屏幕方向)
│
├── 📄 文档对象 (Document - DOM根节点)
│   ├── window.document.getElementById()
│   ├── window.document.querySelector()
│   ├── window.document.createElement()
│   ├── window.document.body
│   ├── window.document.head
│   └── ... (所有DOM方法)
│
├──  数据存储
│   ├── window.localStorage (本地存储)
│   │   ├── setItem(key, value)
│   │   ├── getItem(key)
│   │   ├── removeItem(key)
│   │   └── clear()
│   ├── window.sessionStorage (会话存储)
│   │   ├── setItem(key, value)
│   │   ├── getItem(key)
│   │   ├── removeItem(key)
│   │   └── clear()
│   └── window.indexedDB (索引数据库)
│
├──  事件系统
│   ├── 窗口事件
│   │   ├── window.onload
│   │   ├── window.onresize
│   │   ├── window.onscroll
│   │   ├── window.onbeforeunload
│   │   └── window.onunload
│   ├── 焦点事件
│   │   ├── window.onfocus
│   │   └── window.onblur
│   └── 消息事件
│       ├── window.onmessage
│       └── window.onstorage
│
├──  控制台 (Console)
│   ├── window.console.log()
│   ├── window.console.error()
│   ├── window.console.warn()
│   ├── window.console.table()
│   ├── window.console.time() / timeEnd()
│   └── window.console.clear()
│
├──  数字和数学
│   ├── window.Math (数学对象)
│   │   ├── Math.PI, Math.E
│   │   ├── Math.random()
│   │   ├── Math.floor(), Math.ceil()
│   │   └── Math.max(), Math.min()
│   ├── window.Number
│   └── window.parseInt(), parseFloat()
│
├──  全局对象
│   ├── window.Object
│   ├── window.Array
│   ├── window.String
│   ├── window.Boolean
│   ├── window.Date
│   ├── window.RegExp
│   ├── window.JSON
│   └── window.Promise
│
├──  异步API
│   ├── window.fetch() (Fetch API)
│   ├── window.XMLHttpRequest (XHR)
│   ├── window.WebSocket
│   ├── window.Worker (Web Workers)
│   └── window.requestAnimationFrame()
│
└──  对话框
    ├── window.alert()
    ├── window.confirm()
    ├── window.prompt()
    └── window.print()

值得注意的是：由于 window 是 BOM 的全局对象，其属性和方法可以直接调用，不需要写 window. 前缀。（比如我们常见的‘console.log()’控制台打印，就没有全写‘window.console.log()’）

下面我们简单介绍一些JS中window对象的常见使用场景。

窗口大小和位置：通过window.innerWidth和window.innerHeight可以获取浏览器可见区域的宽度和高度。而window.pageXOffset和window.pageYOffset可以获取文档滚动条的偏移量，用于确定用户在页面中的位置。

console.log(innerWidth,innerHeight);//通过两个属性就可以看到浏览器的视口宽高了
console.log(pageXOffset,pageYOffset);//HTML没有元素默认是0

弹窗和对话框：window对象提供了许多方法用于创建弹窗和对话框。例如，window.alert()用于显示一个警告框，window.confirm()用于显示一个确认框，window.prompt()用于显示一个输入框。

/* window.alert-警告框 */
alert('警告框')
/* window.confirm确认框 */
const flag = confirm();//有返回值：点击"确定"返回true，点击"取消"或关闭对话框返回false
/* window.prompt输入框 */
const get=prompt();//有返回值：点击"确定"返回输入字符串(空字符串也算)，点击"取消"或关闭返回null

导航和浏览历史：window对象可以通过window.location属性来获取和设置当前页面的URL地址。此外，还可以使用window.history对象来管理浏览器的前进和后退操作。

console.log(location.href);//获取当前URL，比如我这里会打印：file:///C:/Users/dotcpp/Desktop/Dotcpp_JS/Dotcpp.html

定时器：window对象提供了用于执行定时任务的方法，例如window.setTimeout()和window.setInterval()。这些方法可以用来延迟执行代码或周期性地执行代码。

/* 每1s打印并自增全局变量cnt */
let cnt =0
/* 设置定时器 */
const timer=setInterval(function(){
console.log(++cnt);
if(cnt===10)clearInterval(timer)//定时器记得及时清理，否则会造成内存泄漏
},1000)

其他功能：window对象还提供了其他许多功能，如访问和操作浏览器的cookie信息、设置和获取浏览器的标题栏文字、跨窗口通信等。

总结：Window 对象是浏览器环境的全局入口和指挥中心，掌控着整个网页的生命周期、用户交互和浏览器功能，所以读者要学习并熟练掌握window的基本属性和方法。