JS BOM详解 - 技术栈

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 : 设置新窗口的左侧/顶部偏移量, 单位像素

javascript 复制代码

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 ：获取地理位置信息

javascript 复制代码

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_address
				console.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 : 获取历史记录中的数量。