本章内容：
理解window对象 —— BOM的核心
控制窗口、框架和弹出窗口
利用location对象中的页面信息
使用navigator对象了解浏览器
1.window对象
BOM的核心对象是window。表示浏览器的一个实例。在浏览器中window对象既是通过JavaScript访问浏览器窗口的一个接口，又是ES规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因为有权访问parseInt()等方法。
1.1 全局作用域
var age = 2;
function sayAge(){
console.log(this.age)
}
console.log(window.age)
sayAge()
window.sayAge()
//定义全局变量和window对象上直接定义属性的区别是:全局变量不能通过delete操作符删除,而window对象上的定义的属性可以.
//如下:
window.color = 'red'
delete window.age //报错
delete window.color //returns true
console.log(window.age) //2
console.log(window.color) //undefined
//尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的变量是否存在.
var newValue = oldValue //报错,因为oldValue未定义
var n1 = window.oldValue //不会报错,因为这是一次属性查询,n1的值是undefined1.2 窗口关系及框架
如果页面包含框架，则每个框架都拥有自己的window对象。并且保存在frames集合中。在frames集合中通过数值索引(从0开始，从左到右，从上到下)或框架名称来访问相应的window对象。每个window对象都有一个name属性，其中包含框架的名称。
<frameset rows="160,*">
<frame src="http://www.baidu.com/" name="topFrame">
<frameset cols="50%,50%">
<frame src="http://www.baidu.com/" name="leftFrame">
<frame src="http://www.baidu.com/" name="rightFrame">
</frameset>
</frameset>
<script>
//顶部框架访问
// window.frames[0]
// window.frames['topFrame']
// top.frames[0]
// top.frames['topFrame']
// frames[0]
// frames['topFrame']
// //左侧框架访问
// window.frames[1]
// window.frames['leftFrame']
// top.frames[1]
// top.frames['leftFrame']
// frames[1]
// frames['leftFrame']
// //右侧框架访问
// window.frames[2]
// window.frames['rightFrame']
// top.frames[2]
// top.frames['rightFrame']
// frames[3]
// frames['rightFrame']
//top对象始终指向最高（外）层的框架,也就是浏览器窗口.
//parent对象始终指向当前框架的直接上层框架,某些情况下,parent有可能等于top,但在没有框架的情况下,parent一定等于top
//self对象始终指向window.
//所有这些对象都是window对象的属性.可以通过window.parent | window.top等形式来访问.
//也可以连接起来使用window.parent.parent.frames[0]
</script>1.3 窗口位置
//跨浏览器取得窗口左边和上边的位置
//也就是浏览器窗口与屏幕左边和上边的距离
var l = (typeof window.screenLeft == 'number') ? window.screenLeft : window.screenX
var r = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY
console.log(l,r)
//将窗口精确的移动到一个新位置.moveTo和moveBy方法接收两个参数,moveTo接收新位置的x和y坐标值.moveBy接收的是水平和垂直方向向上移动的像素数
//这两个方法可能会被浏览器禁用.
//将窗口移动到
window.moveTo(0,0)
//将窗口向下移动100像素
window.moveBy(0,100)1.4 窗口大小
//IE9+ | FireFox | safari | opera | chrome提供4个属性确认窗口大小
//innerWidth | innerHeight | outerWidth | outerHeight
//outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸
//在chrome中.这两属性与innerWidth 和 innerHeight 返回值相同,即视口大小而非浏览器窗口大小
//document.documentElement.clientWidth 和 document.documentElement.clientHeight 中保存了页面视口的信息
//这些属性必须在标准模式下才有效.混杂模式就必须通过document.body.clientWidth和document.body.clientHeight取得相同信息
//对于chrome来说,上面的任何一种都可以取得
//虽然无法确定浏览器窗口本身的大小.但可以取得页面视口的大小.如下:
var pw = window.innerWidth,
ph = window.innerHeight
if(typeof pw != 'number'){
if(document.compatMode == 'CSS1Compat'){
pw = document.documentElement.clientWidth
ph = document.documentElement.clientHeight
}else{
pw = document.body.clientWidth
ph = document.body.clientHeight
}
}
console.log(pw,ph)
//resizeTo和resizeBy方法可以调整浏览器窗口的大小.接收两个参数.其中resizeTo接收新宽度和新高度,
//resizeBy接收新窗口与原窗口的宽度和高度之差,如下:
//调整到100x100
window.resizeTo(100,100)
//调整到200x150
window.resizeBy(100,50)
//以上两个方法有可能会被浏览器禁用.1.5 导航和打开窗口
//window.open方法可以导航到一个特定url.也可以打开一个新的浏览器窗口.接收4个参数:要加载的url.窗口目标.一个特性字符串以及表示新页面是否取代浏览器历史记录中当前加载页面的布尔值.通常只传第一个,最后一个参数只在不打开新窗口的情况下使用.
//如果window.open传递第二个参数,而且该参数是已有窗口或框架的名称.那么就会在具有该名称的窗口或框架中加载第一个参数指定的url.
//等同于<a href="http://www.baidu.com" target="topFrame"></a>
window.open('http://www.baidu.com','topFrame')1.6 间歇调用和超时调用
JS是单线程语言。超时调用使用window对象的setTimeout()方法，接收两个参数。要执行的代码和以毫秒表示的时间（即在代码执行前要等待多少毫秒）。第一个参数可以是一个包含js代码的字符串，也可以是一个函数。如下：
//超时调用
setTimeout(function(){
console.log('111')
},1000)
//第二个参数表示等待多长时间的毫秒.但是经过该时间后指定的代码不一定会执行.
//js是一个单线程序的解释器.因此一定时间只能执行一段代码.JS有个任务队列.这些任务会按照他们添加到队列的顺序执行.
//settimeout第二个参数告诉js再过多长时间将当前任务添加到队列中.如果队列是空的,就会立即执行.不空的话必须等前面的代码执行完毕
//
var t = setTimeout(function(){
console.log('222')
},3000)
//清除定时器
clearTimeout(t)
//间歇调用
// setInterval(function(){
// console.log('333')
// },1000)
var num = 0;
var max = 10;
var iv = null;
function add(){
num++;
console.log(num)
//如果执行次数达到了max的次数,则取消
if(num == max){
clearInterval(iv)
console.log('结束')
}
}
iv = setInterval(add,500)
//也可以用超时调用来实现
var num1 = 0;
var max1 = 10;
var iv1 = null;
function jian(){
num1++;
console.log(num1)
//如果执行次数未达到max的值,则设置另一次超时调用
if(num1 < max1){
setTimeout(jian,500)
}else{
console.log('2结束')
}
}
setTimeout(jian,500)
//使用settimeout模拟setInterval
var i = 0;
function time(){
i++
console.log('啊' + i)
setTimeout(time,1000)
}
time()1.7 系统对话框
//询问框
if(confirm('ok?')){
alert('ok')
}else{
alert('no')
}
//
var r = prompt('输入点东西',"")
if(r !== null){
alert('欢迎' + r)
}
//显示打印对话框
window.print()
//显示查找对话框
window.find()2. location 对象
location对象提供了当前窗口中加载的文档有关的信息，还提供了导航功能。它既是window对象的属性也是document对象的属性。window.location和document.location引用的是同一个对象。location还可以将URL解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。
2.1 查询字符串参数
//创建一个函数,用于解析查询字符串.然后返回包含所有参数的一个对象:
function qs(){
//取得查询字符串并去掉开头的问号
var q = (location.search.length > 0 ? location.search.substring(1) : ""),
//保存数据的对象
args = {}
//取得每一项
items = q.length ? q.split("&") : [],
item = null,
name = null,
value = null,
//在循环中使用
i = 0,
len = items.length;
for(i = 0;i<len;i++){
item = items[i].split('=')
name = docodeURIComponent(item[0])
value = decodeURIComponent(item[1])
if(name.length){
args[name] = value
}
}
return args
}
var a = qs()
console.log(a["q"])
console.log(a["num"])2.2 位置操作
使用location对象可以通过很多方式来改变浏览器的位置。
//
location.assign('http://www.baidu.com')
//以下代码跟以上结果相同
window.location = 'http://www.baidu.com'
location.href = 'http://www.baidu.com'
//假设初始URL为http://www.baidu.com
//将URL修改为/#sction1
location.hash = '#sction1'
//将URL后面修改为/?q=javascript
location.search = '?q=javascript'
//将URL设置为www.google.com
location.hostname = 'www.google.com'
//将URL修改为/mydir
location.pathname = 'mydir'
//修改URL端口
lication.port = 8080
//以上的修改,都会产生一个历史记录.因此通过后退都可以返回到前一个页面.要禁用可以使用replace方法.只接收一个参数就是要导航到的URL.
function aa(){
setTimeout(function(){
location.replace('http://www.baidu.com');
},1000)
}
//页面重新加载
location.reload() //有可能从缓存中加载
location.reload(true) //从服务器重新下载3.navigator对象
该对象的作用用来识别客户端浏览器的事实标准。每个浏览器有自己的标准。
3.1 检测插件
//检测插件
function hp(name){
name = name.toLowerCase()
for(var i = 0;i<navigator.plugins.length;i++){
if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
return true
}
}
return false
}
//检测flash
console.log(hp("Flash"))
//检测QT
console.log(hp('QuickTime'))
//检测IE中的插件
function iehp(name){
try{
new ActiveXObject(name)
return true
}catch(ex){
return false
}
}
//检测Flash
console.log(iehp('ShockwaveFlash.ShockwaveFlash'))
//检测QuickTime
console.log(iehp('QuickTime.QuickTime'))
//检测所有浏览器中的flash
function isflash(){
var result = hasPlugin('Flash')
if(!result){
result = hasIEPlugin('ShockwaveFlash.ShockwaveFlash')
}
return result
}
//检测Flash
console.log(isflash)3.2 注册处理程序
//要将一个站点注册为处理RSS源的处理程序.
navigator.registerContentHandler('application/rss+xml','http://www.baidu.com?feed=&s','Some Reader')4. screen 对象
screen对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。每个浏览器中的screen对象都包含着各不相同的属性。
涉及移动设备屏幕大小时，运行IOS的设备始终会像是把设备竖着拿在手里一样，因此返回的值是768 x 1024。而Android设备则会相应调用screen.width和screen.height的值。
5.history对象
history对象保存着用户上网的历史记录，从窗口打开的那一刻算起。因为history是window对象的属性。因此每个浏览器窗口，每个标签页乃至每个框架都有自己的history对象与特定的window对象关联。
使用go方法可以在用户的历史记录中任意跳转。可向前向后，接收一个参数。表示向前或向后跳转的页面数的一个整数值。负数表示向后跳转（类似于后退）。正数向前跳转（类似前进）。如下：
// //后退一页
// history.go(-1)
// //前进一页
// history.go(1)
// //前进两页
// history.go(2)
// //也可以给go方法传一个字符串,此时浏览器会跳转到历史记录中包含该字符串的第一个位置,可能后退也可能前进,具体要看哪个位置最近.
// //如果历史记录不包含该字符串,则什么也不做
// history.go('baidu.com')
// //简写go方法
// //后退
// history.back()
// //前进
// history.forward()
// //history还有一个length属性,保存着历史记录的数量.数量包括所有历史记录.即向前向后的记录.对于加载到窗口.标签页或框架的第一个页面而言,length = 0.
//如下可以测试用户是否一开始就打开了你的页面.
if(history.length == 0){
console.log('第一次')
}else{
console.log('第二次')
}本章小结
浏览器模型BOM以window对象为依托，表示浏览器窗口以及页面可见区域。同时window对象还是Es中的Global对象，因而所有的全局变量和函数都是他的属性。且所有原生的构造函数以及其他函数也都存在与他的命名空间下。
- 在使用框架时，每个框架都有自己的window对象以及所有原生构造函数以及其他函数的副本。每个框架都保存在frames集合中，可以通过位置或通过名称来访问。
- 有一些窗口指针，可以用来引用其他框架，包括父框架
- top对象始终指向最外围的框架。也就是整个浏览器窗口。
- parent对象表示包含当前框架的框架，而self对象则返回window。
- 使用location对象可以通过编程方式来访问浏览器的导航系统。设置相应的属性，可以逐段或整体性的修改浏览器的URL。
- 调用replace()方法可以导航到一个新的URL。同时该URL会替换浏览器历史记录中当前显示的页面。
- navigator对象提供了与浏览器有关的信息。提高哪些信息取决于用户的浏览器；也有公共的属性（如userAgent）存在于所有浏览器中。
BOM还有两个对象：screen和history，screen对象中保存着客户端与显示器有关的信息，一般用于站点分析。history对象为访问浏览器的历史记录开了一个小缝隙。开发人员可以据此判断历史记录的数量。也可以在历史记录中向后或者向前导航到任意页面。
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
