BOM(Browser Object Model)是浏览器对象模型,它提供了独立于任何特定文档的对象,用于浏览器窗口和浏览器窗口中的脚本之间的交互。以下是一些常用的 JavaScript 操作 BOM 的方法:
1.window.alert()
弹出一个警告框,显示指定的文本和 OK 按钮。
window.alert("这是一个警告框!");
2.window.confirm()
弹出一个带有确定和取消按钮的对话框,并返回用户的选择(true 或 false)。
var result = window.confirm("你确定要继续吗?"); if (result) { console.log("用户点击确定"); } else { console.log("用户点击取消"); }
3.window.prompt()
弹出一个带有文本输入字段和确定及取消按钮的对话框,并返回用户输入的文本(如果用户点击确定)或 null(如果用户点击取消)。
var name = window.prompt("请输入你的名字", "Harry Potter"); console.log("你好," + name + "!");
4.window.location()
用于获取或设置窗口的 URL,并可以解析 URL 的各个组成部分。
// 设置窗口的 URL window.location.href = "https://www.example.com"; // 获取当前 URL var currentURL = window.location.href; console.log(currentURL); // 获取 URL 的各个部分 var hostname = window.location.hostname; // example.com var pathname = window.location.pathname; // /path/to/page.html var search = window.location.search; // ?query=string var hash = window.location.hash; // #section
5.window.navigator()
包含有关浏览器的信息。
var browserName = window.navigator.appName; var browserVersion = window.navigator.appVersion; console.log("浏览器名称:" + browserName); console.log("浏览器版本:" + browserVersion);
6.window.screen()
包含有关客户端屏幕的信息。
var screenWidth = window.screen.width; var screenHeight = window.screen.height; console.log("屏幕宽度:" + screenWidth); console.log("屏幕高度:" + screenHeight);
7.window.history()
允许脚本与浏览器的历史记录进行交互。
// 后退一页 window.history.back(); // 前进一页 window.history.forward(); // 加载历史列表中的特定页面 window.history.go(n); // n 为要加载的页面在历史列表中的相对位置
8.window.setTimeout() 和 window.clearTimeout()
用于在指定的毫秒数后执行函数,或取消之前设置的定时器。
// 设置定时器 var timerId = window.setTimeout(function() { console.log("5 秒后执行此函数"); }, 5000); // 取消定时器 window.clearTimeout(timerId);
9.window.setInterval() 和 window.clearInterval()
用于每隔指定的毫秒数重复执行函数,或取消之前设置的间隔定时器。
// 设置间隔定时器 var intervalId = window.setInterval(function() { console.log("每秒执行此函数"); }, 1000); // 取消间隔定时器 window.clearInterval(intervalId);
以上只是 BOM 的一部分功能,实际上 BOM 还提供了更多的方法和对象,用于与浏览器进行交互。