第十二章 BOM
窗口关系
top 对象永远指向最上层窗口，即浏览器窗口本身
parent 始终指向当前窗口的父窗口
self 始终指向 window
窗口位置和像素比
screenLeft 表示当前窗口距离屏幕左侧的距离，返回 CSS 像素
screenTop 表示当前窗口距离屏幕顶部的距离，返回 CSS 像素
moveTo 接收移动到新位置的绝对坐标 x 和 y
moveBy 接收相对于当前位置移动的 x 和 y 的距离
devicePixelRatio 获取物理像素与CSS像素之间的转换比
窗口大小
outerWidth 返回浏览器窗口自身的宽度
outerHeight 返回浏览器窗口自身的高度
innerWidth 返回浏览器页面视口的宽度
innerHeight 返回浏览器页面视口的高度
document.documentElement.clientWidth 返回整个页面视口的宽度
document.documentElement.clientHeight 返回整个页面视口的高度
resizeTo() 接收新的宽度和高度
resizeBy() 接收宽度和高度各要缩放多少
视口位置
scrollX pageXoffset 横向滚动距离
scrollY pageYoffset 纵向滚动距离
相关方法：
scroll() scrollTo() scrollBy()
这三个方法都接收一个 ScrollToOptions 字典
// 正常滚动
window.scrollTo({
left: 100,
top: 100,
behavior: 'auto'
});
// 平滑滚动
window.scrollTo({
left: 100,
top: 100,
behavior: 'smooth'
});
导航与打开新窗口
window.open() 接收四个参数：URL、目标窗口、特性字符串、表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值
可以将 window.open() 赋值给一个变量，通过变量来操作新窗口
对话框相关
alert() 通知对话框
confirm() 确认对话框
prompt() 提示对话框
window.find() 查找对话框
window.print() 打印对话框
location对象
hash 获取 # 后面的内容
host 获取服务名和端口号
hostname 获取服务器名
href 获取完整的 url
pathname 获取 url 中的路径和文件名
port 获取端口
protocol 获取协议
search 获取查询字符串，以 ? 开头
username 获取域名前指定的用户名
password 获取域名前指定的密码
origin 获取 url 的源地址
URLSearchParams
js 提供的一个操作查询字符串的方法，通过 API set() get() delete() 操作，具体效果并不复杂，参考对象的就差不多了
操作地址
location.assign(url) 立即启动导航到新URL的操作，同时在浏览器历史记录中增加一条记录，location.href 和 window.location 操作同理
除了 hash 之外，只要修改location的一个属性，就会导致页面重新加载新URL
location.reaplace(url) 重新加载后不会增加历史记录，用户不能回到上一页
location.reload() 重新加载当前显示的页面，不传参数，页面会以最有效的方式重新加载
navigator对象
screen对象
history对象
导航
history.go() 这个方法只接收一个参数，这个参数可以是一个整数，表示前进或后退多少步。负值表示在历史记录中后退(类似点击浏览器的“后退”按钮)，而正值表示在历史记录中前进(类似点击浏览器的“前进”按钮)。go()方法的参数也可以是一个字符串，这种情况下浏览器会导航到历史中包含该字符串的第一个位置
go()有两个简写方法:back()和forward()。顾名思义，这两个方法模拟了浏览器的后退按钮和前进按钮
history对象还有一个length属性，表示历史记录中有多个条目。
网友评论