JS-BOM
JS-BOM Browser Object Model
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//localhosthostname:8080host/index.htmlpathname?name=yjl&age=20search
方法
方法 | 解释 |
---|---|
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个 … |