北京 网站 外包,免费空间做淘宝客网站,百度广告投放价格,深圳建网站服务浏览器对象模型#xff08;Browser Object Model#xff0c;BOM#xff09;是指一组与浏览器进行交互的 JavaScript 对象。它允许 JavaScript 与浏览器的组件进行交互#xff0c;比如窗口、文档、历史记录等。BOM 不同于 DOM#xff08;文档对象模型#xff09;#xff…浏览器对象模型Browser Object ModelBOM是指一组与浏览器进行交互的 JavaScript 对象。它允许 JavaScript 与浏览器的组件进行交互比如窗口、文档、历史记录等。BOM 不同于 DOM文档对象模型后者专注于处理 HTML 和 XML 文档的结构和内容。下面是五个主要对象
window 对象表示浏览器的一个窗口是 JavaScript 在浏览器环境中的全局对象。这意味着在全局作用域中定义的变量和函数实际上都是 window 对象的属性和方法。location 对象用于获取或改变当前文档的 URL允许页面重定向navigator 对象提供了关于浏览器的一些信息包括用户代理信息、浏览器版本、用户的语言设置等。screen 对象提供了有关用户屏幕的信息比如屏幕宽度、高度history 对象用于访问浏览器的历史记录可以用于前进、后退操作
window 对象
window 对象是 BOM 的核心表示浏览器窗口或标签页。window 对象提供了一系列属性和方法
window 对象属性
document对 Document 对象的只读引用用于访问页面的内容。history对 History 对象的只读引用用于管理浏览历史。innerHeight返回窗口的文档显示区的高度以像素为单位。innerWidth返回窗口的文档显示区的宽度以像素为单位。location用于获取或设置窗口的 URL。name设置或返回窗口的名称。outerHeight设置或返回窗口的外部高度包括工具栏和滚动条等界面元素。outerWidth设置或返回窗口的外部宽度包括工具栏和滚动条等界面元素。screenX返回窗口在屏幕上的水平坐标。screenY返回窗口在屏幕上的垂直坐标。navigator包含大量有关 Web 浏览器的信息用于检测浏览器及操作系统。
window 方法
alert(message)显示一个带有指定消息和一个确定按钮的对话框。confirm(message)显示一个带有指定消息以及确定和取消按钮的对话框并返回一个布尔值。prompt(message, defaultValue)显示一个带有指定消息、一个文本输入字段以及确定和取消按钮的对话框并返回用户输入的文本如果用户点击取消按钮则返回 null。open(url, windowName[, windowFeatures])打开一个新的浏览器窗口或标签页并返回一个新的 Window 对象。close()关闭当前窗口。setTimeout(function, delay)在指定的延迟以毫秒为单位后调用一个函数或计算一个表达式。setInterval(function, delay)按照指定的周期以毫秒为单位调用一个函数或计算一个表达式。
location 对象
Location 对象是浏览器的一个重要组成部分它提供了关于当前文档的 URL 的信息并允许你进行 URL 的操作。
Location 对象属性
例子https://www.csdn.net:8080/cdn/about.html?namesimahe#goods属性可以取值也可以设置值。
属性名例子描述hrefhttps://www.csdn.net:8080/cdn/about.html?namesimahe#goods完整的 URLprotocolhttps页面使用的协议。 http 或 httpshostwww.csdn.net:8080域名端口号如果有hostnamewww.csdn.net不带端口的域名port8080端口号没有返回空字符串pathnamecdnURL 的目录或文件名search?namesimaheURL 查询字符串“?”开头hash#goods返回 URL 中的 hash没有返回空字符串
Location 对象的方法
assign(url)加载新的文档,window.location.assign(csdn.com); replace(url)替换当前文档window.location.replace(csdn.com); reload()重新加载当前文档,window.location.reload();
navigator 对象
navigator 对象提供了有关浏览器的信息。
navigator 对象属性
navigator.userAgent可以用来检查浏览器类型手机号类型。navigator.language获取浏览器语言然后设置网站的语言提升用户体验。navigator.onLine检查用户当前是否处于联网状态。navigator.geolocation获取地理位置信息
function getMobileModel() {var userAgent navigator.userAgent || navigator.vendor || window.opera;var mobileModel 未知手机型号;if (/iPhone/i.test(userAgent)) {} else if (/Android/i.test(userAgent)) {mobileModel Android设备;}return mobileModel;
}console.log(getMobileModel());screen 对象
Screen 对象是浏览器的一个组成部分用于提供有关用户屏幕的详细信息如屏幕尺寸、颜色深度、分辨率等。这些信息可以帮助开发者获取有关用户环境的上下文以优化布局和响应式设计。
screen 对象属性
screen.width返回屏幕的宽度单位像素包括任务栏或浏览器边框等。screen.height返回屏幕的高度单位像素包括任务栏或浏览器边框等。screen.availWidth返回屏幕可用宽度即除去任务栏或浏览器边框等后的宽度单位像素。这个属性对于确定网页内容的最佳布局宽度非常有用。screen.availHeight返回屏幕可用高度即除去任务栏或浏览器边框等后的高度单位像素。这个属性可以帮助开发者确保网页内容在用户的屏幕上可见。screen.colorDepth返回显示屏幕的颜色分辨率像素比特。这个属性可以帮助开发者了解用户设备的颜色显示能力从而选择适当的图像和颜色方案。screen.pixelDepth返回目标设备或缓冲器上的调色板的比特深度通常与 screen.colorDepth 相同。screen.deviceXDPI 和 screen.deviceYDPI分别返回显示屏幕的每英寸水平点数和每英寸垂直点数。这些属性对于了解用户设备的屏幕密度和物理尺寸非常有用。
screen 使用场景
响应式设计设备适配和用户体验优化
// 使用 Screen 对象实现响应式设计
function adjustLayout() {if (screen.availWidth 768) {document.body.style.backgroundColor lightblue;} else {document.body.style.backgroundColor white;}
}// 监听页面加载和窗口大小变化
window.onload adjustLayout;
window.onresize adjustLayout;if (screen.colorDepth 24) {// 使用更高质量的图像
} else {// 使用低质量或优化过的图像
}history 对象
history 对象保存着用户上网的历史记录从窗口打开的那一刻算起。处于安全考虑,开发人员无法得知用户浏览过的 URL。
history 对象属性
history.length返返回历史记录中条目的数量包括当前页面。即用户访问的总页面数。history.scrollRestoration滚动恢复属性允许 web 应用程序在历史导航上显式地设置默认滚动恢复行为history.state返回当前页面的 state 对象。这个属性在 HTML5 中引入用于存储与当前历史记录条目相关联的状态对象。
history 主要方法
back()会在会话历史记录中向后移动一页。如果没有上一页则此方法调用不执行任何操作。forward()会话历史中向前移动一页。go(delta)从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动具体取决于 delta 参数的值。pushState()向浏览器的会话历史栈增加了一个条目。replaceState()用于更新会话历史栈条目。与 pushState()类似但它不会新建一个而是替换当前的。
history 使用场景
导航控制状态管理单页应用SPAVue-router 的 history 模式 history.go(-1) //-1,1,2
history.back()
history.forward()
if(history.length0){//用户打开的第一个页面
}history.pushState({ key: value }, , /new-url);总结
BOM 提供了与浏览器交互的基础设施允许开发者获取当前窗口、文档、历史、导航和屏幕的信息及功能。这些功能使得我们能够创建丰富的用户体验和交互。
