一. BOM
- Browser OBject Model 浏览器对象模型
- 操作浏览器的前进, 后退, 刷新, 打印, 关闭, 打开新窗口...
- BOM对象的顶级对象是window
- BOM是没有规范的, DOM有规范, 遵循w3c规范
1. window对象
- 所有全局变量都是window属性
- 组成: document, location, history, screen, nav, prompt(), close()...
- window的open()
- open() 打开一个新的页面, 并返回新的window对象
- 一般用在事件中
- 格式: open(url, name, [option])
// 点击按钮跳转至另一个页面
oBtn.onclick = function() {
open("http://www.baidu.com", "百度", "_blank", "height=200px,width=300px,left=500px,top=300px");
}
2. href
- protocol 协议
- host 主机
- hostname 主机名称(域名)
- port 端口
- path 路径
- pathname 路径名称
- search 查询
- query 参数
- #hash 哈希锚点
3. location的属性
- location 打印location对象
- location.href 获取url
- location.protocol 获取协议
- location.host 获取主机
- location.port 获取端口
- location.hostname 获取主机名(域名)
- location.pathname 获取当前路径
- location.search 获取?及?后面的字符串(参数)
- location.hash 哈希锚点,获取#后面的字符串
console.log(location); // 打印location对象
console.log(location.href); // http://127.0.0.1:5500/01-BOM.html?query=name#1
console.log(location.protocol); // http:
console.log(location.host); // 127.0.0.1:5500
console.log(location.port); // 5500
console.log(location.hostname); // 127.0.0.1
console.log(location.pathname); // /01-BOM.html
console.log(location.search); // ?query=name
console.log(location.hash); // #1
4. location的方法及属性
- location.assign() 跳转
location.assign("http://baidu.com");
- location.replace() 跳转
location.replace("http://baidu.com");
- location.href 跳转
location.href = 'http://baidu.com';
- location 跳转
location = 'http://baidu.com';
- location.hash 哈希锚点
location.hash = '#1';
- location.reload() 刷新
- location.reload(true) 强制刷新
location.reload();
location.reload(true); //强制刷新
5. history 网页历史记录
- history.forward() 前进
- history.back() 后退
- history.go(num)
- num 1 前进
- num -1 后退
- num 0 刷新
- history.length 当前有多少条历史记录
6. navigator 保存了浏览器的信息
- navigator.userAgent
- 用户代理信息,通过该属性可以获取浏览器及操作系统信息
console.log(navigator.userAgent); // Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome / 94.0 .4606 .81 Safari / 537.36
- 定位,获取地理坐标经度和纬度(目前只有Microsoft Edge能查看)
navigator.geolocation.getCurrentPosition(function(location) {
var x = location.coords.latitude; // 纬度
var y = location.coords.longitude; // 经度
console.log(x, y);
});
