目录
3.设置定时器(setTimeout, setInterval等)。
什么是BOM
- BOM(Browser Object Model,浏览器对象模型)是JavaScript中用于与浏览器进行交互的一系列对象和方法的集合。与DOM(Document Object Model,文档对象模型)不同,DOM专注于网页的内容,而BOM则关注浏览器窗口以及与浏览器交互的接口。
- BOM比DOM更大,它包含DOM
BOM的构成
- 它是JS访问浏览器窗口的一个接口
- 它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window ,前面学习的对话框都属于window对象方法,如alert(、prompt0等。
1.窗口(Window)对象:
BOM的顶级对象,代表了浏览器的一个实例(即一个窗口或标签页)。通过它,你可以访问到浏览器提供的各种服务和功能,比如:
1. 控制窗口的打开、关闭和尺寸调整
打开窗口
// 打开一个新窗口,并尝试加载指定的URL
var myWindow = window.open('https://www.example.com', '_blank');
// 注意:现代浏览器通常阻止了通过脚本打开的新窗口的某些行为,如弹出窗口的自动调整大小,除非它是由用户的某种形式的交互(如点击事件)触发的。
关闭窗口
// 关闭由window.open()打开的窗口
if (myWindow) {
myWindow.close();
}
// 注意:出于安全考虑,只有那些通过脚本打开的窗口(且它们的opener属性非null)才能通过脚本关闭。
调整窗口尺寸
// 注意:由于安全限制,这些操作可能不会被执行,除非由用户事件(如点击)触发
if (myWindow) {
myWindow.resizeTo(800, 600); // 调整窗口宽度为800px,高度为600px
myWindow.resizeBy(100, 50); // 基于当前尺寸,宽度增加100px,高度增加50px
}
2. 访问浏览器历史记录
// 跳转到历史记录中的下一个页面(如果有的话)
window.history.forward();
// 跳转到历史记录中的上一个页面
window.history.back();
// 也可以使用history.go()方法,其中参数为整数,正数表示向前跳转,负数表示向后跳转
window.history.go(-1); // 等同于history.back()
3.设置定时器(setTimeout, setInterval等)。
- 语法:window.setTimeout(调用函数,延迟毫秒数)
- 定义:setTimeout也称回调函数callback,延时时间到了就去调用这个函数,只调用一次就结束
- 语法:window.setInterval(回调函数,间隔毫秒数)
- 定义:setInterval方法会重复调用一个函数,每隔这个时间,就去调用一次回调函数,会重复调用很多次
// 使用setTimeout设置一个延时执行的函数
setTimeout(function() {
console.log('This message will appear after 2 seconds.');
}, 2000);
// 使用setInterval设置一个每隔指定时间重复执行的函数
setInterval(function() {
console.log('This message will appear every 1 second.');
}, 1000);
4.清除定时器
<img src="../img/小恐龙.webp" alt="">
<button>停止动画</button></button>
<script>
var img=document.querySelector('img');
var timeoutId=setTimeout(function(){
img.style.display="none";
},5000);
var btn=document.querySelector('button');
btn.addEventListener('click',function(){
clearTimeout(timeoutId);//timeoutId定时器名字
img.style.display="block";
},);
</script>
5.访问URL信息和进行导航。
// 获取当前页面的URL
var currentURL = window.location.href;
console.log(currentURL);
// 重定向到另一个URL
window.location.href = 'https://www.google.com';
// 或者使用window.location.assign()
window.location.assign('https://www.google.com');
// 替换当前历史记录项,而不是添加一个新项
window.location.replace('https://www.google.com');
2.位置(Location)对象:
属于Window对象的一个属性,用于获取和设置当前页面的URL。通过Location对象,你可以解析URL的各个部分(如协议、主机名、端口、路径、查询字符串等),并可以将用户重定向到新的URL。
属性
属性名称 | 作用 |
href | 获取或设置整个 URL |
protocol | 获取 URL 的协议部分(如 "http:" 或 "https:") |
host | 获取 URL 的主机名和端口号(如果有的话) |
hostname | 获取 URL 的主机名 |
port | 获取 URL 的端口号 |
pathname | 获取 URL 的路径部分(URL 中域名后的部分) |
search | 获取 URL 的查询字符串部分(问号 ? 后面的部分),包括问号 |
hash | 获取 URL 的锚部分(井号 # 后面的部分),包括井号 |
方法
方法名称 | 作用 |
reload() | 重新加载当前页面 |
replace() | 用新的文档替换当前文档,但不会在历史记录中生成新的记录 |
获取 URL 的各个部分
// 获取完整的 URL
var fullUrl = window.location.href;
console.log(fullUrl);
// 获取协议(例如,http: 或 https:)
var protocol = window.location.protocol;
console.log(protocol);
// 获取主机名(不包括端口号)
var hostname = window.location.hostname;
console.log(hostname);
// 获取端口号(如果 URL 中包含端口号的话)
var port = window.location.port;
console.log(port);
// 获取路径名(URL 中域名后的部分)
var pathname = window.location.pathname;
console.log(pathname);
// 获取查询字符串(URL 中问号后的部分)
var search = window.location.search;
console.log(search);
// 获取哈希值(URL 中井号 # 后面的部分)
var hash = window.location.hash;
console.log(hash);
修改 URL 并重定向用户
// 直接修改 href 属性来重定向用户
window.location.href = 'https://www.example.com';
// 使用 assign 方法也可以达到同样的效果
window.location.assign('https://www.example.com');
// 使用 replace 方法替换当前的历史记录项,而不是添加一个新项
// 注意:这意呀着用户不能通过后退按钮返回到原始页面
window.location.replace('https://www.example.com');
// 修改查询字符串(需要手动构建新的查询字符串)
// 假设我们要添加或修改查询参数,我们需要先解析当前的查询字符串,然后添加或修改参数,最后重新赋值
// 这里不展示完整的实现,因为涉及字符串处理,但概念是类似的
// window.location.search = '?newParam=value&existingParam=newValue';
// 修改哈希值(通常用于页面内的导航)
window.location.hash = '#section2';
3.导航器(Navigator)对象:
提供了关于浏览器的信息,如浏览器名称、版本、用户代理字符串、系统平台等。这可以帮助开发者根据浏览器的不同来编写兼容性代码。
属性
属性名 | 作用 |
userAgent | 返回一个由客户机发送服务器的user-agent 头部的值。这个字符串包含了关于浏览器的详细信息,如浏览器名称、版本、操作系统等 |
appCodeName | 返回浏览器的代码名。对于大多数浏览器来说,这个值都是"Mozilla" ,这是一个历史遗留问题,源于早期的Netscape Navigator浏览器 |
appName | 返回浏览器的名称,但这个属性通常不返回完整的浏览器名称,而是返回像"Netscape" 这样的通用名称,这可能不如userAgent 字符串那么有用 |
appVersion | 返回浏览器的版本信息,但同样,这个信息可能不如直接从userAgent 字符串中解析出的信息详细 |
platform | 返回浏览器运行的操作系统平台。例如,"Win32" 、"Linux x86_64" 或"MacIntel" |
vendor | 返回浏览器的厂商/供应商名称,如"Google Inc." (对于Chrome浏览器) |
language | 返回浏览器的首选语言,通常是ISO 639-1代码,例如"en-US" 表示美式英语 |
onLine | 返回一个布尔值,表示浏览器是否连接到互联网 |
代码示例
function getBrowserInfo() {
var userAgent = navigator.userAgent;
var appName = navigator.appName;
var appVersion = navigator.appVersion;
var platform = navigator.platform;
console.log("User Agent: " + userAgent);
console.log("App Name: " + appName); // 注意:这通常返回 "Netscape",不是特别有用
console.log("App Version: " + appVersion); // 这也可能不是很有用,因为格式因浏览器而异
console.log("Platform: " + platform); // 浏览器运行的操作系统平台
// 示例:基于用户代理字符串进行非常简单的浏览器检测(不推荐)
if (/MSIE/i.test(userAgent) || /Trident\/7\./i.test(userAgent)) {
console.log("可能是Internet Explorer");
} else if (/Chrome/i.test(userAgent)) {
console.log("可能是Chrome");
} else if (/Firefox/i.test(userAgent)) {
console.log("可能是Firefox");
} else if (/Safari/i.test(userAgent)) {
// 注意:Safari和Chrome都包含"Safari"字符串,因为Chrome基于Safari的WebKit引擎
// 因此,你应该先检查Chrome
console.log("可能是Safari");
}
// 更好的做法是使用特性检测(Feature Detection)
if ('geolocation' in navigator) {
console.log("浏览器支持地理位置服务");
}
// 使用navigator.mediaDevices(需要HTTPS环境)
if ('mediaDevices' in navigator) {
console.log("浏览器支持媒体设备访问");
// 注意:实际使用媒体设备(如摄像头)时,需要用户授权
}
}
getBrowserInfo();
4.屏幕(Screen)对象:
包含了关于用户屏幕的信息,如屏幕分辨率、颜色深度等。这对于优化页面布局和样式以适应不同屏幕尺寸非常有用。
对象属性
属性名称 | 作用 |
width 和 height | screen.width:屏幕的总宽度(以像素为单位) screen.height:屏幕的总高度(以像素为单位) |
availWidth 和 availHeight | screen.availWidth:屏幕上可用于应用程序(不包括系统任务条等)的宽度(以像素为单位) screen.availHeight:屏幕上可用于应用程序的高度(以像素为单位) |
colorDepth | screen.colorDepth:屏幕的颜色深度(每个像素的颜色位数) |
pixelDepth | creen.pixelDepth:与colorDepth相同,表示屏幕的颜色深度(每个像素的颜色位数) |
console.log(`Screen width: ${screen.width}px`);
console.log(`Screen height: ${screen.height}px`);
console.log(`Available screen width: ${screen.availWidth}px`);
console.log(`Available screen height: ${screen.availHeight}px`);
console.log(`Screen color depth: ${screen.colorDepth} bits per pixel`);
console.log(`Screen pixel depth: ${screen.pixelDepth} bits per pixel`);
5.历史(History)对象
提供了浏览器历史记录的访问功能,允许你前进或后退到浏览器的历史记录中的某个页面。但是,出于安全考虑,它不允许你访问浏览器历史记录中的URL。
对象方法 | 作用 |
history.back(-n) | 后退到当前页面的前一个页面 |
history.forward() | 前进到当前页面的下一个页面(即之前通过history.back()方法访问过的页面) |
history.go(n) | 根据参数n的值,后退或前进n个页面。如果n是正数,则前进n个页面;如果n是负数,则后退n个页面 |
window对象常见事件
代码示例
1.load事件
window.onload = function(){
console.log("页面加载完成");
alert("11");
}
window.addEventListener("load", function(){
console.log("页面加载完成");
alert("22");
});
window.addEventListener("DOMContentLoaded", function(){
console.log("DOM内容加载完成");
alert("33");
});
2.resize
window.addEventListener('resize', function(){
console.log("窗口宽度:" + window.innerWidth);
console.log("窗口高度:" + window.innerHeight);
if(window.innerWidth < 800){
console.log("小屏幕");
}else{
console.log("大屏幕");
} } , false);
输出: