day7(12.28)理解window对象——BOM核心
失恋,谈了一年的女神,分手了,荒废了一个星期。程序员不哭,站起来继续撸。
控制窗口、框架、弹出窗口
利用location对象中的页面信息
使用navigator对象了解浏览器
window对象:浏览器的一个实例,js访问浏览器的一个接口,又是ECMAScript规定的Global对象。网页中任何一个变量、对象、函数都以window作为全局对象。浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:
window.document.getElementById("header");
与此相同:
document.getElementById("header");
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight hait- 浏览器窗口的内部高度
window.innerWidth widθ- 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
其他 Window 方法
一些其他方法:
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
全局作用域:
全局对象:因为window作为全局对象,所以全局作用域中声明的变量、对象、函数都是window的一个属性和方法。
比如:var age = 29 ; 就有 alert(window.age);
var age = 29;
function sayAge(){
alert(this.age);
} //在全局中定义的age和sayage()自动归于window对象下
alert(window.age); //29
sayAge(); //29 这里的sayAge()在全局对象中,所以this.age映射到window.age
window.sayAge(); //29
一个区别:全局变量不能通过delete操作符删除,直接在window对象上定义的属性可以。
var age = 29; //因为这里添加到window的属性的特性[[configurable]]为false。
window.color = "red";
//在IE < 9 在有中都false
delete window.age;
//在IE < 9 在有中都true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined
另外:尝试访问某个没有声明的变量会抛出错误,但是查询window对象,可以知道某个可能未声明的变量是否存在。
// oldValue 没有声明,抛出错误
var newValue = oldValue;
// 这里是一次属性查询,newValue 的值 undefined
var newValue = window.oldValue;
窗口关系以及框架
如果页面中包含框架,则每个框架都有自己的window独享,并保存在frames集合中。
在frames集合中,可以通过数值索引或者框架名称来访问相应的window对象。每个window独享有一个name属性,包含框架的名称。
窗口的位置:
screenLeft和screenTop分别表示窗口相对于屏幕左边上边的位置。
screenX和screenY属性提供相同的窗口位置信息。
//将窗口移动到屏幕左上角
window.moveTo(0,0);
//将窗口向下移动100像素
window.moveBy(0,100);
//将窗口移动到(200,300)
window.moveTo(200,300);
// 将窗口向左移动50像素
window.moveBy(-50,0);
两个方法
setTimeout(),接受两个参数:要执行的代码和等待时间
第一个参数可以是包含js的字符串,也可以是一个函数。
//不建议第一种
setTimeout("alert('Hello world!') ", 1000);
setTimeout(function() {
alert("Hello world!");
}, 1000);
第二个参数是等待多长时间毫秒数,但是等待之后不一定执行。
js是单线程解释器,一定时间内只执行一段代码。为了控制执行代码,
就有一个js任务队列。这些任务会按照将它们添加到队列的顺序执行。
setTimeout()迭戈参数告诉js再过多长时间把当前任务添加到队列中。
如果队列是空的,添加的代码马上执行,否则等前面代码执行完了之后再执行。
调用setTimeout()之后,返回一个数值ID,表示超时调用。这个超时调用ID是执行代码的唯一标识,可以用它clearTimeout(ID)来取消超市调用。
setInterval(),跟setTimeout一样两种。也返回一个ID
取消用clearInterval(ID)
location对象
提供了与当前窗口加载的文档有关信息。还提供了导航功能。
另外window.location和document.location对象是同一个
属性描述 从头往后记忆:
protocol设置或返回当前 URL 的协议。
hostname 设置或返回当前 URL 的主机名。
port 设置或返回当前 URL 的端口号。
host设置或返回主机名和当前 URL 的端口号。
pathname 设置或返回当前 URL 的路径部分。
hash 设置或返回从井号 (#) 开始的 URL(锚)。
search 设置或返回从问号 (?) 开始的 URL(查询部分)。
href 设置或返回完整的 URL。
navigator对象
定义和用法
userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。一般来讲,它是在 navigator.appCodeName(返回浏览器的代码名。) 的值之后加上斜线和 navigator.appVersion(返回浏览器的平台和版本信息。) 的值构成的。例如:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。注:用户代理头:user-agent header。
> console.log(navigator.userAgent)[Log] Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.1.2 Safari/603.3.8这个方法也不是百分之百的能区分浏览器,比如360,有的封禁360浏览器,然后它就把UA做的跟Chrome一毛一样,就很难区分了。至少这个办法有个相对的结果
来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:
navigator 数据可被浏览器使用者更改。
浏览器无法报告晚于浏览器发布的新操作系统。
浏览器检测由于 navigator 可误导浏览器检测,使用对象检测可用来嗅探不同的浏览器。由于不同的浏览器支持不同的对象,您可以使用对象来检测浏览器。例如,由于只有 Opera 支持属性 "window.opera",您可以据此识别出 Opera。例子:if (window.opera) {...some action...}
screen对象
window.screen 对象包含有关用户屏幕的信息。
window.screen 对象在编写时可以不使用 window 这个前缀。一些属性:screen.availWidth - 可用的屏幕宽度screen.availHeight - 可用的屏幕高度
Window Screen 可用宽度screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。
Window Screen 可用高度screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。
history对象
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
注释:没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象。
History 对象属性
属性描述
length返回浏览器历史列表中的 URL 数量。
History 对象方法
方法描述
back()加载 history 列表中的前一个 URL。
forward()加载 history 列表中的下一个 URL。
go()加载 history 列表中的某个具体页面。
History 对象描述
History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因,History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有back()、forward()和go()方法。
例子
下面一行代码执行的操作与单击后退按钮执行的操作一样:
history.back()
下面一行代码执行的操作与单击两次后退按钮执行的操作一样:
history.go(-2)