🟡JavaScriptBOM

window对象

窗口位置

🥕位置获取

window.screenTop,window.screenLeft显示浏览器应用左上角的位置

🥕位置方法

这些方法可能被浏览器禁用

• window.moveTo(x, y)浏览器左上角移动至(x, y)
• window.moveBy(x, y)浏览器左上角相对当前向左x px向下y px

窗口大小

🍐大小获取

window.innnerHeight, window.innerWidth显示视口大小(不含工具栏,地址栏等.包含滚动条)

window.outerHeight,window.outerWidth显示浏览器应用的窗口大小

document.documentElement.clientHeight,document.documentElement.clientWidth显示渲染页的大小(不含滚动条)

🍐窗口缩放方法

这些方法可能被浏览器禁用

• window.resizeTo(x, y)缩放到x × y
• window.resizeBy(x, y)缩放至(x+原x) × (y+原y)

视口位置

🍊位置获取

window.scrollX,window.scrollY或window.pageXoffset,window.pageYoffset显示滚动位置

🍊滚动方法

• window.scroll()
• window.scrollTo()
• window.scrollBy()

链接导航

🌿打开链接

window.open(url)方法可以打开链接并返回窗口的window实例

该实例的opener属性指向打开它的window实例

window.open('https://www.baidu.com')          // 默认在新窗口打开

浏览器可能弹出警告

🌿目标窗口

window.open的第二个参数表示打开链接的窗口

可以使用自定义名称,若找不到该名称窗口则新建一个同名窗口

也可使用'_self','_parent','_top','_blank'

window.open('https://www.baidu.com', '_self')
window.open('https://www.baidu.com', 'page1')   // 无名为`page1`的窗口则新建一个同名窗口

🌿特性设置

window.open的第三个参数接收一个特性字符串配置新窗口设置

window.open('https://www.baidu.com', 'page1', 'height=600, width=400')

浏览器可能禁用特性设置

🌿窗口关闭

close()可关闭window实例

const newPage = window.open('https://www.baidu.com')   // 获取实例
setTimeout(() => newPage.close(), 5000)                // 5秒后关闭

window.close()                                         // 关闭最新窗口

当不是在window实例,而是在window对象上使用时关闭最新的窗口

部分浏览器不支持关闭非脚本打开的窗口

关闭后window对象的closed属性值为true

🌿弹窗屏蔽

被浏览器屏蔽时window.open返回null可用此特性判断是否被屏蔽

被屏蔽时也会抛出错误,可用try/catch精确捕获是否被屏蔽

定时器

🍌setTimeout

setTimeout(f, t[, a, b...])第一个参数接收一个函数或js代码的字符串,第二个参数设置t ms后代码/函数进入消息队列,消息队列为空则立即执行,后面的参数到期时会传给任务函数(字符串不可)

设置时返回一个超时排期ID,可用clearTimeout(ID)取消排期

const Task = setTimeout('alert("Hi!")', 1000)

// 等价于
const Tsak = setTimeout(() => {
  alert('Hi!')
}, 1000)

if(flg)
  clearTimeout(Task)               // 取消任务

🍌 setInterval

setInterval(f, t[, a, b...])参数同上,其每隔t ms就将任务推入消息队列

设置时返回一个超时排期ID,可用clearInterval(ID)取消排期

对话框

🍒alert(text)

接收文本,其他类型隐式调用toString()

只有确认键,无返回值,执行期间为同步状态

window.alert('Hi!')
alert('Hi!')          // 可不加`window.`以下均不加

alert

🍒confirm(text)

接收文本,其他类型隐式调用toString()

有确认/取消键,返回布尔值对应true/false(同步执行)

confirm('Hi!')

confirm

🍒prompt(tips, default)

接收两个文本,其他类型隐式调用toString()

第一个为提示,第二个为默认输入(默认为空)(同步执行)

有输入时返回输入字符串,否则返回null

prompt('What is your name?', 'Jonathan')

prompt

🍒print()

开启打印(异步执行)

print()

print

location对象

获取location对象

window.location
document.location  // 等价于
location           // 等价于

属性

属性名	属性值
hash	URL散列表
hostname	服务器名
port	端口号
host	服务器名及端口号
href	完整的URL
protocol	使用协议
search	问号开头的查询字符串
username	用户名
password	密码
origin	URL源地址(只读)

查询字符串

可使用URLSearchParams来解析location.search(自动跳过?)

const searchParams = new URLSearchParams(location.search)

has(key)方法检查是否有key参数

get(key)方法返回key参数的值,没有则返回null

set(key, value)新增参数

delete(key)删除参数

实例支持迭代

for(const x of searchParams)
  // x 为数组 x[0] = key, x[1] = value

操作URL

🌶整体修改

后两种写法隐式调用了assign方法

location.assign('https://www.baidu.com')
location.href = 'https://www.baidu.com'     // 等价于
location = 'https://www.baidu.com'          // 等价于

🌶局部修改

可以通过修改location的属性来导航

navigator对象

该对象存放了客户端软硬件信息与一些方法,可用来确认浏览器类型

插件检测

plugins数组存放了浏览器插件

数组元素有以下属性描述插件

• name插件名
• description插件描述
• filename插件文件名
• length插件处理的MIME(媒体类型)数

screen对象

存储了客户端显示器信息

属性

属性	属性值
availHeight

history对象

导航

go(n)方法用于导航前进或后退

history.go(2)     // 前进两步
history.go(-2)    // 后退两步

length属性存储本窗口页面记录总数,URL或location.hash改变会增加记录数

🍠语法糖

history.forward() // 前进一步
history.back()    // 后退一步

历史状态管理