JavaScript BOM API是由一组对象组成的,这些对象提供了对浏览器功能的访问,包括创建和关闭窗口、读取和设置历史记录、获取当前URL和页面,以及导航到新的URL。
BOM对象模型的结构如下:
Window
- document
- location
- history
- navigator
Window 对象
Window 对象表示浏览器窗口。它提供了对窗口大小、位置、和其他特性的访问。
以下是一些Window对象的常用属性和方法:
window.innerWidth
和window.innerHeight
:获取窗口的内部宽度和高度。window.scrollX
和window.scrollY
:获取窗口的滚动位置。window.location
:获取当前URL和页面。window.open()
:打开一个新的窗口。window.close()
:关闭当前窗口。
Location 对象
Location 对象表示当前URL。它提供了对URL的各个部分的访问,包括协议、主机名、端口号、路径和查询字符串。
以下是一些Location对象的常用属性和方法:
location.href
:获取或设置当前URL。location.protocol
:获取当前URL的协议。location.hostname
:获取当前URL的主机名。location.port
:获取当前URL的端口号。location.pathname
:获取当前URL的路径。location.search
:获取当前URL的查询字符串。location.reload()
:重新加载当前页面。location.replace()
:用新的URL替换当前URL。
History 对象
History 对象表示浏览历史记录。它提供了对浏览历史记录的访问,包括后退、前进和重新加载页面。
以下是一些History对象的常用属性和方法:
history.length
:获取浏览历史记录的长度。history.state
:获取当前页面的状态。history.back()
:后退到浏览历史记录中的上一页。history.forward()
:前进到浏览历史记录中的下一页。history.go()
:后退或前进到浏览历史记录中的指定页面。
Navigator 对象
Navigator对象提供有关浏览器的信息,包括浏览器版本、操作系统、用户语言和屏幕分辨率。
以下是一些Navigator对象的常用属性和方法:
navigator.userAgent
:获取浏览器版本。navigator.platform
:获取操作系统。navigator.language
:获取用户语言。navigator.appName
:获取浏览器名称。
演示代码
// 打开一个新的窗口
window.open("https://www.example.com");
// 关闭当前窗口
window.close();
// 获取当前URL
console.log(window.location.href);
// 获取当前URL的协议
console.log(window.location.protocol);
// 获取当前URL的主机名
console.log(window.location.hostname);
// 获取当前URL的端口号
console.log(window.location.port);
// 获取当前URL的路径
console.log(window.location.pathname);
// 获取当前URL的查询字符串
console.log(window.location.search);
// 重新加载当前页面
window.location.reload();
// 用新的URL替换当前URL
window.location.replace("https://www.example.com/new-page");
// 后退到浏览历史记录中的上一页
window.history.back();
// 前进到浏览历史记录中的下一页
window.history.forward();
// 后退或前进到浏览历史记录中的指定页面
window.history.go(-1); // 后退一页
window.history.go(1); // 前进一页
// 获取浏览器版本
console.log(navigator.userAgent);
// 获取操作系统
console.log(navigator.platform);
// 获取用户语言
console.log(navigator.language);
// 获取浏览器名称
console.log(navigator.appName);