JS-BOM

BOM介绍

BOM即浏览器对象模型

• 上图可以看出DOM其实是包含在BOM里的
• window是BOM的顶级对象，所以使用window的方法时可以省略window(例:window.alert() <==> alert() )
• 全局变量，自定义函数等也是window对象的

window常用方法/属性

对话框

alert(仅提示)

confirm(带确认取消按钮)

var flag=confirm("确认跳转？");	//返回true/false

prompt(输入框)

var flag=prompt("提示文字：","文本框预输入值");	//参数2可省

选择确定则返回文本框值，否则返回null

打开/关闭窗口

open

open方法直接打开窗口，大部分浏览器出于安全考虑都会进行拦截；所以应放在例如单击事件等用户主动事件中，打开的窗口不会被拦截

格式：

window.open(url,target,param)

url：要打开的url

• 若为空字符串则打开空白窗口
• 可以直接写相对路径的网页文件
• 例如www.baidu.com要加http://，否则会被当做相对路径文件

target：打开方式，有3种

值	解释
_blank(默认)	新窗口打开
_self	替换当前页面
_parent	替换父框架

target可替换为name属性,但两者只能出现一个，例子：
open('','newWin',''); //此时 新窗口.name="nueWin"

param：新窗口参数

param是一个字符串，用=号赋值，以,分割，例：width=200,height=100

常用参数

值	类型	解释
width/height	number	宽/高(px)(不同浏览器都不一样)
top/left	number	顶边距/左边距(px)(不同浏览器都不一样)

其他参数(不同浏览器都不一样,有的还忽略某个属性)

值	类型	解释
location	yes/no 1/0	显示地址栏
fullscreen	yes/no 1/0	真全屏显示,不是F11那种(仅IE有)
resizable	yes/no 1/0	可调整大小,IE默认no
scrollbars	yes/no 1/0	滚动条
status	yes/no 1/0	状态栏
toolbar	yes/no 1/0	工具栏

不同浏览器的规则都不一样，所以最好不用这里的参数设置

返回值：新打开窗口的BOM，可以用其操作子窗口

close

var childWin=window.open("","","width=100,height=100");	//打开子窗口
childWin.close();	//关闭子窗口

//检测窗口是否关闭
console.log(childWin.closed());	//true

window.close();		//关闭自己

父窗口(opener)

var childWin=window.open("","","width=100,height=100");
childWin.document.write("this is childWin");
childWin.opener.document.write("this is parentWin,this msg is write by childWin");

通过子窗口操作到了父窗口

打印页面(print)

window.print();		//一般会弹出打印页面

窗口位置大小操作

方法	解释
moveTo(x,y)	移动窗口(xy对应窗口左上角)
moveBy(x,y)	相对移动窗口(可以是负数)
resizeTo(width,height)	调整大小
resizeBy(width,height)	相对调整大小(可以是负数)
scrollTo(x,y)	滚动页面(xy对应页面左上角),scrollTo(0)表示xy都回到
scrollBy(x,y)	相对滚动页面(可以是负数)

获取屏幕分辨率

window.screen.width 和 window.screen.height

注意获取的是浏览器缩放后的屏幕分辨率，例如1920x1080高分屏的浏览器DPI设置为125%后为1536x864

window常用对象

location

window.location对象指浏览器的地址栏

属性

属性	解释
href	（Hypertext Reference 超文本引用）指url地址，直接赋值相当于跳转 例：location.href="http://www.baidu.com"，直接赋值给location效果和location.href相同
hash	#后面的内容(包含#)，例：http:\\abc.com#1的hash=#1
host	主机名+端口，例http://localhost:8080/index.html的host=localhost:8080
hostname	主机名
pathname	路径名，例http://localhost:8080/index.html的pathname=/index.html
protocol	协议类型(包含:)，一般有 http: 或 https: 或 file:
search	查询字符串,?后的参数(含?=&)

http:^protocol//localhost^hostname:8080^host/index.html^pathname?name=yjl&age=20^search

方法

方法	解释
reload()	刷新,reload方法会执行assign
assign(url)	改变浏览器地址,记录历史,可以后退
replace(url)	替换浏览器地址,不记历史,不可后退

• reload()和location.assign(location.href)都可以实现刷新
• replace()是新url的页面替换旧页面,和assign不同,不是转到新url同时保留旧页面
• 假设当前页面可以接收post请求,使用assign刷新时因为没删除旧页面,所以仍会再次提交旧页面的post参数,若不想再次提交可以使用replace,语句:lcoation.replace(loaction.href)

navigator

navigator包含有关浏览器的信息

属性	解释
onLine	是否离线,在线操作的应用可以随时检测网络
cookieEnabled	浏览器是否启用cookie
userAgent	用户代理

userAgent解释：
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/18.17763

• <引擎>/<版本> <(信息)> …
• 几乎所有浏览器UA信息前都是Mozilla(网景公司产品),是因为UA是网景提出的,且当时Mozilla是最好的引擎,开发者读取到是Mozilla的话会加一些特殊功能,而其他浏览器无法获取,所以争相说自己兼容Mozilla,以至现在Mozilla都没了还加,导致UA出现的真实意图事与愿违.其他的Chrome,Safari等也是渲染引擎,表示该浏览器支持这些引擎.
• 每个浏览器的UA内容都不太相同,但格式都一样

history

操作浏览历史

方法	解释
back()	后退
forward()	前进
go(number)	跳转页面个数，go(-1):后退、go(0):刷新、go(1):前进、go(2):前进2个 …