1 BOM
1.1 BOM的技术定位
ECMAScript
,DOM
,BOM
三者互有、共有交集,共同完成web交互的实现。
1.2 BOM的结构图
1.3 BOM属性
属性名 | 描述 |
---|---|
navigator | 浏览器信息 |
location | 浏览器定位和导航 |
history | 窗口浏览器历史 |
screen | 屏幕信息 |
1.3-A navigator
在console面板中输入navigator
,就可以得到[Object.navigator],包括:appCodeName
,platform
,userAgent
等。
/* navigator.userAgent */
//chrome [-***-]
Mozilla/5.0(Windows NT 6.1;WOW64)[-AppleWebKit/537.36-](KHTML,like Gecko)
Chrome/40.0.2214.115 Safari/537.36
//firefox [-***-]
Mozilla/5.0(Windows NT6.1;WOW64;rv:36.0)[-Gecko/20100101-]Firefox36.0
//IE [-***-]
"Mozilla/5.0 (Windows NT 6.1; WOW64; [-Trident/7.0-]; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; rv:11.0) like Gecko"
1.3-B location
在console面板中输入location
,就可以得到[Object.location],包括href
,host
,hash
等。
/* location */
{hash: "", host: "", hostname: "", href: "file:///D:/...", origin: "file://",
pathname: "/D:/卢万林.致庸....", port: "", protocol: "file:", search: ""}
/* location的操作 */
//载入新的URL,记录浏览历史
assign(url)
//载入新的URL,不记录浏览历史
replace(url)
//重载当前页面
reload()
1.3-C history
在console面板中输入history
,就可以得到[Object.History],记录了length
,state
;
/* history */
{constructor: History {...}, length: 1, state: null}
/* history的方法 */
//回退
back();
//前进
forward();
//转到
go();
1.3-D screen
在console面板中输入screen
,就可以得到[Object.screen],记录了availHeight
,availWidth
,height
,width
等。
1.4 windows对象
1.4-A windows方法
方法名 | 描述 |
---|---|
alert(),confirm(),prompt() | 三种对话框 |
setTimeout(),setInterval() | 计时器 |
open(),close() | 开新窗口、关闭窗口 |
1.4-B 三种对话框
//alert
alert("nihao");
//confirm
confirm("真的要上吗?");
//prompt
prompt("请输入你的名字");
1.4-C 开关新窗口
//open()
var w = window.open("subwin.html","subwin","width=400,height=350,status=yes,resizable=yes");
//close()
w.close();
1.4-D 事件
属性名 | 描述 |
---|---|
load | 文档和所有图片加载完毕时 |
unload | 离开当前文档时 |
beforeunload | 和unload类似,但它提供询问用户是否确定离开的机会 |
resize | 拖动改变浏览器窗口大小时 |
scroll | 拖动滚动浏览器时 |