BOM(Browser Object Model)即浏览器对象模型,它提供了一系列对象和方法,用于与浏览器窗口和文档进行交互。
window对象的方法
alert()
- 功能:用于显示一个带有指定消息和一个“确定”按钮的警告框。它会阻塞页面的执行,直到用户点击“确定”按钮。
- 示例:
alert('这是一个警告框');
- 应用场景:通常用于向用户显示一些重要的提示信息或警告消息,例如表单验证失败时提示用户输入错误等。
confirm()
- 功能:显示一个带有指定消息、“确定”按钮和“取消”按钮的确认框。用户点击“确定”按钮时返回
true
,点击“取消”按钮时返回false
。 - 示例:
var result = confirm('你确定要执行此操作吗?'); if (result) { console.log('用户点击了确定'); } else { console.log('用户点击了取消'); }
- 应用场景:常用于需要用户确认的操作,如删除数据、提交重要表单等,在执行操作前先询问用户是否确认,以避免误操作。
prompt()
- 功能:显示一个带有指定消息、输入框、“确定”按钮和“取消”按钮的提示框,用于获取用户输入的值。用户点击“确定”按钮时返回输入框中的值,点击“取消”按钮时返回
null
。 - 示例:
var name = prompt('请输入你的名字:');
if (name!== null) {
console.log('你输入的名字是:', name);
}
- 应用场景:当需要用户输入一些信息时使用,如登录页面获取用户名、搜索框获取搜索关键词等。
location对象的方法
location.href
- 功能:获取或设置当前页面的 URL 地址。当获取时,返回当前页面的完整 URL;当设置时,会跳转到指定的 URL 地址。
- 示例:
// 获取当前页面的 URL
var currentUrl = location.href;
console.log('当前页面的 URL 是:', currentUrl);
// 跳转到新的页面
location.href = 'https://www.example.com';
- 应用场景:常用于页面跳转,如点击链接、按钮等触发页面导航到其他页面。
location.reload()
- 功能:重新加载当前页面。可以选择是否强制从服务器重新获取页面资源,默认为
false
,即优先从浏览器缓存中加载。 - 示例:
// 普通重新加载,优先使用缓存
location.reload();
// 强制从服务器重新加载
location.reload(true);
- 应用场景:当页面数据发生变化,需要重新获取最新数据时使用,如用户提交表单后,服务器返回新的页面内容,可通过重新加载页面来显示更新后的内容。
history对象的方法
history.back()
- 功能:加载历史列表中的前一个 URL,等同于用户点击浏览器的“后退”按钮。
- 示例:
history.back();
- 应用场景:当用户在页面之间导航后,想要回到上一个页面时使用,提供了一种简单的页面导航方式。
history.forward()
- 功能:加载历史列表中的下一个 URL,等同于用户点击浏览器的“前进”按钮。
- 示例:
history.forward();
- 应用场景:与
history.back()
相对应,当用户点击了“后退”按钮后,想要再次前进到之前的页面时使用。
history.pushState() 和 history.replaceState()
- 功能:
history.pushState()
方法用于向浏览器历史记录中添加一个新的状态记录,同时改变当前的 URL,但不会触发页面刷新;history.replaceState()
方法则用于修改当前历史记录的状态信息,同样不会刷新页面。这两个方法都接受三个参数:状态对象、页面标题和可选的 URL。 - 示例:
// 添加一个新的历史记录状态
var stateObj = {
page: 'newPage' };
history.pushState(stateObj, 'New Page Title', 'new-page.html');
// 修改当前历史记录的状态
var newStateObj = {
page: 'modifiedPage' };
history.replaceState(newStateObj, 'Modified Page Title', 'modified-page.html');
- 应用场景:在单页应用(SPA)中广泛使用,用于实现无刷新页面切换和浏览器历史记录的管理,使得用户可以使用浏览器的“前进”和“后退”按钮在不同的页面状态之间导航,同时保持页面的交互性和响应性。
以上只是 BOM 中一些常见的方法,它们为开发者提供了与浏览器窗口和用户交互的重要手段,能够实现丰富多样的网页功能和用户体验。