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个 … |
