javascript bom 教程

前言

BOM（浏览器对象模型）是JavaScript与浏览器之间的接口，它提供了一组对象和方法，用于操作以及控制浏览器窗口和文档。

BOM的基本组成

BOM由几个核心对象组成，包括window、location、navigator、history和screen。下面我们来分别介绍一下这些对象。

window对象

在浏览器中，window对象代表着当前浏览器窗口或者tab页。它不仅提供了与窗口相关的方法和属性，还可以访问浏览器的其他对象，比如document对象。

// 使用window.open()方法打开一个新窗口
window.open("http://www.example.com", "_blank");

location对象

location对象提供了与当前URL相关的方法和属性。通过location对象，我们可以获取当前页面的URL，并对其进行修改。

// 获取当前页面的URL
var currentUrl = location.href;

// 修改当前页面的URL
location.href = "http://www.example.com";

navigator对象

navigator对象提供了关于浏览器的信息，比如浏览器的名称、版本、用户代理字符串等。通过navigator对象，我们可以根据不同的浏览器环境执行不同的操作。

// 判断是否为移动设备浏览器
var isMobile = navigator.userAgent.match(/Mobile/);

history对象

history对象保存了用户在浏览器窗口中访问页面的历史记录。通过history对象，我们可以在浏览器窗口之间前进和后退。

// 前进一页
history.forward();

// 后退一页
history.back();

screen对象

screen对象提供了用户屏幕的信息，比如屏幕的宽度和高度、可用的屏幕空间等。通过screen对象，我们可以根据不同的屏幕尺寸来调整页面的布局和样式。

// 获取屏幕的宽度
var screenWidth = screen.width;

总结

通过BOM，我们可以获取和操作浏览器窗口、页面URL、浏览器信息、历史记录和屏幕信息等。这一系列的对象和方法为我们提供了更多控制和定制化页面的方式。