BOM介绍

垦利不

已于 2024-08-27 10:44:39 修改

阅读量745

点赞数 8

文章标签： javascript 前端开发语言

于 2024-08-25 01:59:22 首次发布

本文链接：https://blog.csdn.net/m0_64450406/article/details/141506930

版权

什么是BOM

1.窗口（Window）对象：

1. 控制窗口的打开、关闭和尺寸调整打开窗口

2. 访问浏览器历史记录

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);

输出：

垦利不

关注

8
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
BOM介绍

BOM（Browser Object Model，浏览器对象模型）是JavaScript中用于与浏览器进行交互的一系列对象和方法的集合。与DOM（Document Object Model，文档对象模型）不同，DOM专注于网页的内容，而BOM则关注浏览器窗口以及与浏览器交互的接口。BOM比DOM更大，它包含DOMBOM的构成它是JS访问浏览器窗口的一个接口它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
复制链接

扫一扫