一、window对象
BOM的核心是window对象,window既是ECMAScript中的Global对象,又是浏览器窗口的JavaScript接口
1.Global作用域
var声明的全部全局变量和函数都会成为window的属性和方法
访问未声明的变量会报错,但是可以在window对象上查询是否存在未声明的变量
2.窗口关系
top: 始终指向最外层窗口,浏览器窗口本身
parent: 始终指向当前窗口的父窗口,如果当前窗口为最外层窗口,则parent === top
self:始终指向window本身
3.窗口位置和像素比
screenLeft / screenTop : 用于表示窗口相对屏幕左侧和顶部的位置 (单位CSS像素)
moveTo(x,y) / moveBy(x,y): 移动窗口
window.devicePixelRatio: 物理像素与CSS像素之间的转换比率,与每英寸像素数(DPI)对应
4.窗口大小
outerWidth / outerHeight: 浏览器窗口自身大小
innerWidth / innerHeight: 浏览器窗口中页面视图大小
document.documentElement.clientWidth / document.documentElement.clientHeight / document.body.clientWidth / document.body.clientHeight
resizeTo(x,y) / resizeBy(x,y) :调整窗口大小
5.视口位置
window.pageXoffset / window.pageYoffset
window.scrollX / window.scrollY : 文档相对于视口滚动距离的位置
scroll() scrollTo() scrollBy() : 滚动页面,前两个方法接受目标位置的坐标,后者接受相对偏移
这几个方法也接受ScrollToOptions字典 { left: 100, top: 100, behavior: 'smooth' / 'auto' }
6.导航与打开新窗口
window.open(url, targetWindowName, prefect, replaceBool) 打开一个新的窗口
url: 窗口的url
targetWindowName: 目标窗口名,可以是窗口名,也可以是“_self" "_parent" "_top" "_blank"等特殊窗口名
Prefect: 特性字符串
replaceBool: 新窗口在浏览器历史记录中是否替换当前加载页面
6-1)弹出窗口
特性字符串是用逗号分隔的设置字符串
fullscreen | yes / no | 表示新窗口是否最大化,仅限IE10支持 |
location | Yes / no | 是否显示地址栏 no |
Menubar | yes / no | 是否显示菜单栏 no |
resizable | Yes / no | 是否可以拖动改变新窗口大小 no |
scrollbars | yes/ no | 是否可以在内容过长时滚动 no |
status | yes / no | 是否显示状态栏 no |
toolbar | yes/ no | 是否显示工具栏 no |
top | 数值 | 新窗口的y轴坐标 |
width | 数值 | 新窗口的宽度,不能小于100 |
height | 数值 | 新窗口的高度,不能小于100 |
left | 数值 | 新窗口的x轴坐标, 不能为负 |
Window.open()返回一个新窗口的引用。
Window.open()打开的窗口可以通过close()关闭,关闭后虽然引用还在,但是只能访问其closed属性检查是否关闭
新打开的窗口有一个openr属性,指向打开它的窗口
6-2)安全限制
IE7开始不能隐藏地址栏。不能移动或缩放弹窗
Firefox1 禁止隐藏状态栏
Opera只能在主窗口打开新窗口,并且不允许出现在在系统对话框的位置
浏览器会在用户操作下才允许创建弹窗
6-3)弹窗屏蔽
所有现代浏览器都内置了屏蔽弹窗的程序
检测弹窗是否被屏蔽,使用tray/catch调用window.open(),并检测返回值是否为null
7.定时器
setTimeout() setinterval()
clearTimeout() clearInterval()
8.系统对话框
alert()
comfirm() 有返回值true/false
prompt() 取消返回null,否则返回输入的字符创
异步显示的对话框
Find() 查询
Print() 打印
二、location对象
提供当前窗口中加载文档的信息,既是window对象,又是document对象(window.location === document.location)
location.hash | URL散列值 |
location.host | 服务器名及端口号 |
location.hostname | 服务器名 |
location.href | 当前加载页面的完整url |
location.pathname | url中的路径和文件名 |
location.port | 端口号 |
location.portacol | 协议 |
location.search | 查询字符串,以问号开头 |
location.username | 域名前指定的当前用户 |
location.password | 域名前指定的密码 |
location.origin | Url的源地址 |
URLSearchParams:
提供一组标准的api方法,通过它们可以检查和修改查询字符串
操作地址
修改浏览器地址
location.assign(url) window.location = url location.href = url
以上三种方法都会立即启动导航到新url的操作,并在浏览器历史记录中添加一条记录
修改location的属性也会修改当前加载的页面
replace(url) 重新加载后不会新增历史记录
reload() // 重新加载当前页,最有效的方法 reload(true) 重新从服务器加载当前页
三、navigator对象
其属性通常用于确定浏览器类型
检测插件:除了IE10及更低版本外的浏览器,都可以通过plugins数组确定是否安装了某个插件,每一项包含
name:插件名
description: 插件描述
filename: 插件的文件名
length: 由当前插件处理的MIME类型数量
旧版本IE浏览器检测插件,要使用专有的ActiveXObject,并尝试实例化特定的插件,每个插件有一个唯一的字符串标识符标识
plugins有一个refresh()方法,属性plugins属性以反映新安装的插件。接受boolean参数,true表示所有包含插件的页面都会重新加载;否则只有plugins会更新,页面不会重新加载。
注册处理程序
registerProtocolHandler(协议mailto/ftp,处理该协议的url, 应用名称)
将web应用程序注册为像桌面应用程序一样的默认应用软件
四、Screen对象
浏览器外面的客户端显示器的信息
五、History对象
当前窗口首次使用以来的用户导航历史记录
go(n) 前往第几页
go(url) 前往特定网址 back() forward()
length:历史记录数目
历史状态管理
Hashchange() 会在页面url的散列变化时被触发,开发者可以在此时做一些操作
History.pushState(stateObj, newTitle, 相对url)
单击后退时,会触发popstate事件