阅读 72

BOM总结

核心——window对象

双重身份

BOM 的核心是window对象,window对象有双重身份,一个是 ECMAScript 的Global对象,另一个就是浏览器窗口的 JavaScript 接口, 以下是浏览器控制台的操作:

a = 12
12
window.a
12
window
Window {window: Window, self: Window, document: document, name: "", location: Location, …}
复制代码

global作用域

所有用 var 声明的变量或者函数都会保存在window对象中,如果不用关键字声明也会到window对象中

var a = 10
b = 20
console.log(window.a) //10
console.log(window.b) //20
复制代码

控制窗口及弹窗

窗口大小

  1. window.innerWidth: 返回页面视口宽度
  2. window.innerHeight: 返回页面视口高度
  3. window.outerWidth:返回页面总体宽度(包含浏览器边框和工具栏)
  4. window.outerHeight:返回页面总体高度(包含浏览器边框和工具栏)

打开新窗口

window.open(要加载的URL, 目标窗口, 特性字符串, xxx),该方法可以用于导航到指定URL,也可以用于打开浏览器新窗口,例如:

const myWindow = window.open("http://www.baidu.com", "myWindow", "height =400,width=400,top=10,left=10")
复制代码

对话框

  1. alter(): 警告框
  2. confirm(): 确认框
  3. prompt(): 提示框

通过location对象获取页面信息

  1. document和window的location属性指向同一个。
  2. 假设我当前加载的页面是http://user:pass@www.baidu.com:80/ljt/?j=javascript#content,那么,location对象的内容如下表:
属性说明
location.hash"#content"如果没有则为空字符串
location.host"www.baicu.com:80"服务器名及端口号
location.hostname"www.baidu.com"服务器名
location.href"user:pass@www.baidu.com:80/ljt/?j=java…"完整URL,与location.toString()返回值一致
location.pathname"/ljt/"路径
location.port"80"端口
location.protocol"http:"协议
location.search"?j=javascript"查询字符串
location.username"user"域名前指定的用户名
location.password"pass"域名前指定的密码
location.origin"www.baidu.com"URL源地址

使用navigator对象了解浏览器

通常用于浏览器的类型,因为不太常用,而且有些值不一定准确,有兴趣的可以查询 Navigator MDN

通过history对象操作浏览器历史

处于安全的考虑history对象不会暴露用户访问过的URL,但是可以前进后退。

导航

go(number)方法可以在用户历史记录中沿任何方向导航。

history.go(-1); // 后退一页,相当于history.back()
history.go(1); // 前进一页,相当于history.forward()
history.go(2); // 前进两页
复制代码

历史状态管理

history.pushState() // 在历史记录栈里面推进一个状态
history.popState() // 在历史记录栈里面抛出一个状态
history.replaceState() // 修改当前历史记录状态而不是推进一个
复制代码
文章分类
前端
文章标签