本文共 3142 字，大约阅读时间需要 10 分钟。
浏览器对象模型（Browser Object Model， BOM）是Web开发中客户浏览器管理的重要工具。尽管BOM没有被标准化，但主流浏览器都支持其基本规则，并被包含在HTML5规范中。以下是我们将探讨的主题及其重点。
本文将围绕以下内容展开：
window对象和框架集navigator、location和screen对象history对象除此之外，还将探讨以下内容：
window对象进行窗口操作location对象和history对象的交互接下来，我们将从window对象开始，逐步深入探讨每个主题。
window对象是客户端浏览器对象模型的基类，也是全局对象。一个window对象代表的是浏览器窗口。对于包含框架的网页，每个框架都会创建一个独立的window对象。
在客户端浏览器中，window对象提供了全局作用域。所有全局变量都会被解析为window对象的属性。例如：
var a = "window.a";function f() {}console.log(window.a); // window.a 在全局作用域中，使用delete运算符可以删除属性，但不能删除变量。
使用window对象可以访问其他客户端浏览器对象。这些对象构成了BOM，具体包括：
window：客户端的顶层对象。navigator：包含浏览器信息、用户代理字符串等。screen：包含客户端屏幕信息。history：存储浏览器访问记录。location：存储当前文档的URL信息。document：操作整个HTML文档。window对象 提供了三种用于人机交互的方法：
alert()：显示确定提示框。confirm()：显示选择提示框，返回布尔值。prompt()：显示输入提示框。这些方法主要用于测试和简单对话框设计。
var user = prompt("请输入你的用户名");if (!!user) { var ok = confirm("你输入的用户名为：" + user + "\n请确认。"); if (ok) { alert("欢迎你 " + user); } else { user = prompt("请重新输入你的用户名："); alert("欢迎你 " + user); }} else { user = prompt("请输入你的用户名：");} 这些方法只能显示文本内容，忽略HTML格式。
可以通过window.open()打开新窗口，并通过window.close()关闭窗口。window.opener属性可以引用打开该窗口的原始窗口。
var win = window.open();win.document.write("这是新打开的窗口
");win.focus();win.opener.document.write("这是原来的窗口
");console.log(win.opener == window); window对象 包括四个定时器相关方法：
setInterval()：周期性执行代码。setTimeout()：延迟执行代码。clearInterval()：取消定时器。clearTimeout()：取消延迟执行。例如：
function jump() { window.resizeTo(200, 200); var x = Math.random() * 1024; var y = Math.random() * 760; window.moveTo(x, y);}var timer = window.setInterval(jump, 1000); navigator对象 存储浏览器信息，主要用于检测浏览器类型和版本。可以通过userAgent属性获取完整的用户代理字符串。
var ua = navigator.userAgent;console.log(ua); // 示例输出：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36
location对象 存储当前文档的URL信息。其主要属性包括：
href：当前文档的完整URL。protocol：协议部分（如http:）。host：主机名和端口（如www.mysite.cn:80）。pathname：当前路径（如news/index.asp）。search：查询字符串。可以通过设置location.href修改当前文档的URL。
location.href = "#top"; // 修改当前文档的锚点。
location对象还支持reload()（重新加载当前页面）和replace()（替换当前历史记录）方法。
history对象 存储浏览器访问历史。HTML5新增的pushState()和replaceState()方法允许程序matically操作历史记录。
history.pushState({ state: "page2", title: "bar.html"}, "bar.html"); 可以通过history.state读取当前状态，并通过popstate事件处理状态变化。
screen对象 提供屏幕信息，用于探测客户端硬件配置。可以用来优化程序显示效果。
例如，实现居中显示新窗口：
function center(url) { var w = screen.availWidth / 2; var h = screen.availHeight / 2; var left = (screen.availWidth - w) / 2; var top = (screen.availHeight - h) / 2; var pos = "top=" + top + ",left=" + left + ",width=" + w + ",height=" + h; var win = window.open(url, "url", pos); win.focus();}center("https://www.baidu.com"); 使用document.write()和writeln()方法可以在浏览器解析时动态生成文档内容。
document.write("段落文本
");document.write("文档解析时动态生成的内容
");function f() { document.write("调用事件处理函数时动态生成的内容
");} 1.所有内容仅供技术参考，不相关内容请忽略。2.某些方法因浏览器差异可能存在差异，建议结合实际测试。3.使用window.open()创建的新窗口，opener属性指向原始窗口。
如需进一步探讨某些内容，请关注相应API文档。
转载地址：http://klszk.baihongyu.com/