JavaScript中的BOM基础与window对象详解

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2025年7月17日 0:8 本文热度 1418

一、BOM是什么？

BOM全称Browser Object Model(浏览器对象模型), 它提供了与浏览器窗口交互的对象和方法. 简单来说:

DOM: 操作网页内容(HTML元素).
BOM: 操作浏览器窗口和行为.

想象一下, DOM是你房间里的家具(可以移动、修改), 而BOM是你房间的窗户和门(可以打开、关闭、调整大小).

BOM的核心是window对象, 它是JavaScript在浏览器中的全局对象. 我们常用的alert()、setTimeout()其实都是window的方法.

二、window对象

window对象有两个重要身份:

全局对象:在浏览器中, 所有全局变量和函数都是window的属性和方法.
浏览器窗口: 代表浏览器窗口或标签页.

var myVar = "Hello";
console.log(window.myVar); //"Hello"-全局变量成为window的属性console.log(myVar === window.myVar); //true
function sayHi() {  console.log("Hi!");}
window.sayHi(); //"Hi!"-全局函数成为window的方法

2.1 常用window属性

让我们看看window对象有哪些实用的属性:

1) window.innerWidth/window.innerHeight: 获取浏览器窗口的内部宽度和高度(不包括工具栏和滚动条)

2) window.outerWidth/window.outerHeight: 获取整个浏览器窗口的宽度和高度

3) window.location: 获取当前页面的URL信息

4) window.navigator: 获取浏览器信息, 例如: window.navigator.userAgent

5) window.screen: 获取用户屏幕信息, 例如: window.screen.width, window.screen.height

2.2 常用window方法

window对象提供了许多实用的方法:

弹窗类:

alert(): 警告框

confirm(): 确认框（返回true/false）

prompt(): 输入框（返回用户输入或null）
定时器:

setTimeout(): 延迟执行

setInterval(): 循环执行

clearTimeout()/clearInterval(): 清除定时器
窗口操作:

open():打开新窗口

close(): 关闭窗口

moveTo()/moveBy(): 移动窗口

resizeTo()/resizeBy(): 调整窗口大小

2.3 浏览器窗口操作示例

1) 打开新窗口:

const newWindow = window.open(  "https://www.example.com",  //URL  "exampleWindow",           //窗口名称  "width=600,height=400"     //窗口规格);

参数说明:

URL: 要加载的页面(可为空).
窗口名称: 可以作为<a target="...">的目标.
窗口规格: 逗号分隔的设置字符串.

窗口规格常用选项:

width/height: 窗口尺寸.
left/top: 窗口位置.
menubar/toolbar/scrollbars: 是否显示菜单栏/工具栏/滚动条(yes/no).

2）关闭窗口:

//关闭当前窗口window.close();
//关闭由open()打开的窗口newWindow.close();

通常只能关闭由JavaScript打开的窗口, 浏览器出于安全限制, 不允许脚本随意关闭用户打开的窗口.

3) 调整窗口的大小和位置:

//将窗口移动到(100, 200)位置window.moveTo(100, 200);
//将窗口向右移动50px,向下移动30pxwindow.moveBy(50, 30);
//将窗口调整为800x600window.resizeTo(800, 600);
//将窗口宽度增加100px,高度减少50pxwindow.resizeBy(100, -50);

出于用户体验和安全考虑, 这些方法通常只能用于由window.open()创建的窗口, 或需要用户先与页面交互后才能使用.

4）窗口位置关系:

//判断窗口是否已关闭if (newWindow.closed) {  console.log("新窗口已关闭");}
//使当前窗口获得焦点window.focus();
//使当前窗口失去焦点window.blur();

三、全局作用域及实用示例

1) window与全局作用域的关系:

var声明的变量会成为全局变量:

var globalVar = "我是全局变量";
// 以下等价console.log(globalVar);        //"我是全局变量"console.log(window.globalVar); //"我是全局变量"

函数声明同样如此:

function globalFunc() {  console.log("我是全局函数");}
//以下等价globalFunc();        //"我是全局函数"window.globalFunc(); //"我是全局函数"

ES6的let和const声明的变量不会成为window的属性:

let localLet = "我是let变量";const localConst = "我是const常量";
console.log(window.localLet);   //undefinedconsole.log(window.localConst); //undefined

2) 一些实用的窗口交互示例:

全屏切换:

//进入全屏function enterFullscreen() {  const element = document.documentElement;  if (element.requestFullscreen) {    element.requestFullscreen();  } else if (element.webkitRequestFullscreen) { /*Safari*/    element.webkitRequestFullscreen();  } else if (element.msRequestFullscreen) { /*IE11*/    element.msRequestFullscreen();  }}
//退出全屏function exitFullscreen() {  if (document.exitFullscreen) {    document.exitFullscreen();  } else if (document.webkitExitFullscreen) { /*Safari*/    document.webkitExitFullscreen();  } else if (document.msExitFullscreen) { /*IE11*/    document.msExitFullscreen();  }}

检测窗口大小变化:

//监听窗口大小变化window.addEventListener("resize", () => {  console.log(`窗口大小已改变：${window.innerWidth} x ${window.innerHeight}`);
  //响应式设计常用技巧  if (window.innerWidth < 768) {    console.log("小屏幕布局");  } else {    console.log("大屏幕布局");  }});

页面滚动控制:

//获取当前滚动位置const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
//滚动到指定位置(平滑滚动)window.scrollTo({  top: 500,  behavior: "smooth"});
//滚动到页面顶部function scrollToTop() {  window.scrollTo({ top: 0, behavior: "smooth" });}
//滚动到页面底部function scrollToBottom() {  window.scrollTo({     top: document.body.scrollHeight,     behavior: "smooth"   });}

四、总结

好了, 今天的文章就讲到这里了, 记住, 虽然window对象功能强大, 但现代Web开发更强调用户体验, 很多传统的窗口操作(如频繁弹窗)已经不推荐使用. 合理利用这些API, 可以创建既功能强大又用户友好的Web应用.

阅读原文：原文链接

该文章在 2025/7/17 10:09:34 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。