BOM

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	拖动滚动浏览器时