BOM
BOM (浏览器对象模型)、JS 提供了可以操作浏览器的对象 ，顶层对象为 window 。 常见的浏览器对象 主要有 screen , navigator , location , history , document 五大类。
window 对象的操作
-
innerWidth/ innerHeight : 获取 浏览器 可见内容的宽度 / 高度 、只读属性
-
outerWidth / outerHeight: 获取 浏览器 自身的 宽度 / 高度 、只读属性
-
alert(message) : 提示框
-
prompt(tips) : 输入提示框
-
confirm(tips) : 确认对话框
-
btoa(string) : 将 字符串（只支持 ascii字符） 进行 base64编码
-
atob(string) : 进行 base64解码
-
setTimeout(fn, delay) : 将指定的 fn 延迟 delay 毫秒 执行
-
setInterval(fn, delay) : 每间隔 delay 毫秒 执行一次 fn
-
clearTimeout(x) : 清除 setTimeout 产生的延迟
-
clearInterval(x) : 取消 setInterval 产生的 轮询。
-
open(url, target, feature) : 打开一个新窗口
- feature 常见的值
- width : 设置新窗口的宽度、单位像素
- height: 设置 新窗口的高度、单位像素
- left / top : 设置 新窗口 的左侧/顶部 偏移量, 单位像素
- feature 常见的值
let childWin = window.open("./child.html", "", "height=600,width=800, top=100, left=300, toolbar=no, menubar=no,scrollbars=no, resizable=no, location=no, status=no");
- close() 关闭窗口
- scrollTo(x, y) : 设置 窗口 水平、垂直 滚动条 相对浏览器的偏移位置 ， 也支持 使用 scrollTo({left: 0, top: 0, behavior: ‘smooth’})
- scrollBy(x, y) : 设置 窗口 水平、垂直 滚动条 相对滚动条自身偏移位置的 偏移量， 用法和 scrollTo 相同。
screen 屏幕对象的操作
- width : 获取 屏幕的 宽度
- height: 获取 屏幕的 高度
navigator 导航对象的操作
-
userAgent ： 获取 浏览器的身份信息
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0 -
geolocation ： 获取地理位置信息
navigator.geolocation.getCurrentPosition(pos => {// 获取维度//console.log(pos.coords.latitude)// 获取经度//console.log(pos.coords.longitude)let location = `${pos.coords.longitude},${pos.coords.latitude}`// 调用高德地图接口 ，获取 地理位置 let url = "https://restapi.amap.com/v3/geocode/regeo?key=cd1d2751ad046252748d6038c797994f&location=" + location ;fetch(url).then(response => response.json()).then(ret => {if (ret.status == 1) {// 获取详细地理位置信息let address = ret.regeocode.formatted_addressconsole.log(address);}})}, error=> {console.error(error) })
location 网址的操作
-
protocal : 获取协议， 返回格式为 http: , 没有
//, 只读 -
hostname : 获取 域名 或 IP 地址 , 只读
-
port : 获取端口号， 只读
-
host : 获取主机和端口， 只读
-
pathname : 获取请求地址 ，只读
-
search : 获取请求参数 ， 以
?开头， 只读 -
hash : 获取描点， 以
#开头 ，只读 -
href : 获取 / 跳转 到 指定的 网址
-
assign(url) : 作用等价于 href 、用来做页面跳转， 跳转 记录 会被添加 到 history 中
-
replace(url) : 替换当前网址，该操作 不会加入 history 中。
history
- forward() : 前进
- back() : 后退
- go(n) : 前进 / 后退的步数 、 >0 代码前进、 < 0 代表后退
- length : 获取历史记录中的数量。