BOM---

最新推荐文章于 2025-12-20 12:23:55 发布

原创最新推荐文章于 2025-12-20 12:23:55 发布 · 1.2k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

BOM（Browser Object Model）浏览器对象模型 BOM 使 JavaScript 有能力与浏览器“对话” BOM尚无正式标准,但是浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性（window）

1.window对象

表示浏览器窗口，所有浏览器都支持 window 对象
所有 JavaScript 全局的对象、函数以及变量均自动成为 window 对象的成员[属性和方法]
全局变量是 window 对象的属性
全局函数是 window 对象的方法
window对象是BOM模型中的顶层对象，因此所有BOM模型中的对象都是该对象的子对象
HTML DOM 的 document 也是 window 对象的属性之一

属性：

window对象的所有子对象都是window对象的属性
所有的全局变量也都是 window 对象的属性

方法：

1.窗口控制

2.弹窗方法

如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。
在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

任务计划计时器：

// 只执行一下
setTimeout(function(){
    alert('欢迎光临');
},1000);
// 周期性定时器
setInterval(function(){
    alert('hello world');
}, 1000);

2.location对象

location 对象用于获得当前页面的地址 (URL)，或把浏览器重定向到新的页面

属性：

修改href的值

location.href="https://www.baidu.com/"

console.log(window.location.pathname);  // 返回文件名和路径地址
// console.log(location.pathname); // 可以省略window
console.log(location.href);  // 返回当前页面的url路径
console.log(location.hostname); // 返回域名 127.0.0.1
console.log(location.port); // 返回端口号 5500
console.log(location.protocol); // 返回协议 http
console.log(location.search); // 返回参数值

方法：

多种跳转方式：

location.replace("https://www.qtummatrix.com/") // 替换当前路径
window.location  ='' // 跳转到对应的页面
window.location.href = '' // 跳转到对应的页面
window.open('url')

3.history对象

history对象是JavaScript中的一种默认对象，该对象可以用来存储客户端浏览器窗口最近浏览过的历史网址。通过History对象的方法，可以完成类似于浏览器窗口中的前进、后退等按钮的功能

属性：

方法：

back()表示返回到上一页面，效果相当于go(-1);

forward()表示返回到下一页面，效果相当于go(1);

go()用于指定页的跳转，比如go(-2)表示返回到浏览过的前两个页面

history.go(0)刷新

4.navigator对象

navigator对象，也称为浏览器对象，该对象包含了浏览器的整体信息，如浏览器名称、版本号等

判断是否是手机端，是否要跳转手机端页面

if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
    window.location.href = ''; // 手机端 
}else{
    window.location.href = ''; // 电脑
}

5.screen对象

screen对象是一个由JavaScript自动创建的对象，该对象的作用主要是描述客户端的显示器的信息，例如屏幕的分辨率、可用颜色数等。
screen对象是一个全局对象，该对象中存放的都是静态属性，这些属性值是只读的

属性：

6.encodeURIComponent() 函数

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。其他字符（比如：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

var uri="http://w3cschool.cc/my test.php?name=ståle&car=saab";
document.write(encodeURIComponent(uri));
// 结果：http%3A%2F%2Fw3cschool.cc%2Fmy%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab