JS Advance --- BOM

coderklaus
927 阅读3分钟

这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战

JavaScript有一个非常重要的运行环境就是浏览器，而且浏览器本身又作为一个应用程序需要对其本身进行操作，所以通常浏览器会有对 应的对象模型(BOM，Browser Object Model)。

所谓的BOM，其实就是浏览器提供的一系列的可以使用JS操作的对象，

这些BOM对象上封装着一系列可以操作浏览器的属性和方法，我们可以使用JS来操作BOM对象上的相关属性和方法

我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁。

BOM主要包括一下的对象模型:

  • window: 包括全局属性、方法，控制浏览器窗口相关的属性、方法
  • location: 浏览器连接到的对象的位置(URL）
  • history: 操作浏览器的历史
  • document: 当前窗口操作文档的对象（DOM）

window

window对象在浏览器中有两个身份：

  • 全局对象
    • ECMAScript其实是有一个全局对象的，在Node中是global， 在浏览器中就是window对象
    • 在浏览器中，window对象就是之前经常提到的全局对象，也就是我们之前提到过GO对象
  • 浏览器窗口对象
    • 作为浏览器窗口时，提供了对浏览器操作的相关的API

常见属性和方法

// 浏览器距离屏幕左侧和顶部的距离
console.log(screenX, screenY)

// 浏览器的宽度和高度
console.log(outerWidth, outerHeight)

// 视口的宽度和高度
console.log(innerWidth, innerHeight)

// 滚动条向右或向下滚到了多少距离
console.log(scrollX, scrollY)

// 关闭窗口
// close()

// 开启一个新窗口
// 默认情况下第二个参数的值是_blank
open('http://www.google.com', '_self')

// 滚动一段距离
// 滚动到坐标为(x,y)的位置
scrollTo(x, y)

scrollTo({
  top: 1000,
  left: 500,
  behavior: 'smooth'
})

// 向下移动100px, 向右移动100px
scrollBy(100, 100)

scrollBy({
  top: 1000,
  left: 500,
  behavior: 'smooth'
})

window.onload = function() {
  console.log("window窗口加载完毕~")
}

window.onfocus = function() {
  console.log("window窗口获取焦点~")
}

window.onblur = function() {
  console.log("window窗口失去焦点~")
}

window.onhashchange = function() {
  console.log("hash发生了改变")
}

window对象是通过Window类创建的，而Window这个类继承自EventTarget这个类

EventTarget类上有三个方法，addEventListener,removeEventListener,dispatchEvent

所以这三个方法在window对象上也可以被使用

const clickHandler = () => console.log('clicked')
addEventListener('click', clickHandler)
removeEventListener('click', clickHandler)

addEventListener('customEvent', () => console.log('custom event'))

// dispatchEvent的参数需要是一个event的实例对象
dispatchEvent(new Event('customEvent'))

location

location的属性如下:

  • href: 当前window对应的超链接URL, 整个URL; pprotocol: 当前的协议;
  • host: 主机地址;
  • hostname: 主机地址(不带端口);
  • port: 端口;
  • pathname: 路径;
  • search: 查询字符串;
  • hash: 哈希值;
  • username:URL中的username(很多浏览器已经禁用);
  • password:URL中的password(很多浏览器已经禁用)

一个完整的URL表示的格式如下:

IatCfz.png

location.assign('http://www.google.com')
// 等价于
location.href="http://www.google.com"

// 直接替换，不产生任何的历史记录
location.replace('http://www.google.com')

// 刷新界面 参数可以传递一个boolean值
// 默认值是false
// 可以设置为true --- 强制刷新
location.reload()

history

history对象允许我们访问浏览器曾经的会话历史记录

// 输出浏览器记录调试 --- 会话中的记录条数
console.log(history.length)

// 当前保留的状态值
console.log(history.state)

// 返回上一页，等价于history.go(-1)
history.back()

// 前进下一页，等价于history.go(1)
history.forward()

// 加载历史中的某一页
history.go(1)
history.go(-1)

// 打开一个指定的地址 --- 不会刷新浏览器
// 参数1，需要在两个路由之间传递的状态值
// 参数2，在切换路由的时候，可以修改网页的标题，--- 大多数浏览器都已经禁止修改，所以一般传空字符串即可
// 参数3，新地址的路由，可以是相对路由，也可以是地址的绝对路径（但必须是同源的）
history.pushState({}, '', '/detail')

// 打开一个新的地址，并且使用replace --- 不会刷新浏览器
// 参数设置和pushState的参数设置一致
history.replaceState({}, '', '/detail')
avatar
文章
阅读
粉丝