一、window对象
1、浏览器中,window对象既是通过javascript访问浏览器窗口的一个接口,又是ECMAscript规定的global对象。
在全局作用域中声明的变量、函数都会成为window 对象的属性和方法。(通过.可以访问)
差别:
定义全局变量和在window对象上直接定义属性有差别。全局变量不能通过delete操作符来删除,window对象上定义的属性可以 |
尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个未声明的变量是否存在(返回undefined) |
2、如果页面中包含框架,则每个框架都有自己的window 对象,并且保存在frames集合中。
可以通过数值索引或者框架名称(name属性)来访问相应的window对象。
使用top 而非window来引用这些框架,因为top对象始终指向最高层的框架,也就是浏览器窗口。
top | top对象始终指向最高层的框架 |
parent | 始终指向当前框架的直接上层框架 |
self | 始终指向window |
某些情况下,top和window相等。没有框架的情况下,parent一定等于top.
3、窗口位置、大小
用来修改window对象位置的属性和方法
IE、Safari 、Opera 、Chrome | screenLeft和screenTop |
Firefox | screenX和screenY |
window对象大小的属性和方法
浏览器 | outerWidth、outerHeight | innerWidth、innerHeight |
IE、Firefox、Safari | 返回浏览器本身的尺寸 | 该容器中页面视图的大小,减去边框宽度 |
Opera | 表示页面视图容器的大小 | 该容器中页面视图的大小,减去边框宽度 |
Chrome | 与innerWidth、innerHeight返回相同的值视口大小viewport | 视口大小viewport |
调整浏览器窗口的大小,以下两个方法都接收两个参数
resizeTo() | 接收新宽度和新高度 |
resizeBy() | 接收新窗口与原窗口的高度和宽度之差 |
这两个方法不适用与框架,只能对最外层的window对象使用
4、导航和打开窗口
window.open() 方法可以导航到一个特定的url ,也可以的打开一个新的浏览器窗口。可以接收四个参数
- 要加载的Url
- 窗口目标
- 一个特性字符串
- 一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值
如果为第二个参数传递了值,而且该参数是已有窗口或框架的名称,那么会在该窗口或框架中加载第一个参数指定的Url。
如果为第二个参数传递了值,但该参数不是已有窗口或框架的名称,那么该方法会根据第三个参数位置上传入的字符串创建一个新窗口或者新标签页。如果没有传入第三个参数,那么就会打开一个带有全部默认设置的新浏览器窗口。
window.open("http://www.wrox.com/","wroxwindow","height:400,width:400,top:10,resizable=yes")
二、location 对象
1、提供了当前窗口中加载的文档的有关信息,以及一些导航功能。
location既是window对象的属性,又是document 对象的属性,即window.location 和document.location引用的是同一个对象。
他可以将url解析为独立的片段,开发人员可以通过不同的属性访问这些片段。
hash | 设置或返回从井号 (#) 开始的 URL(锚)。如果地址里没有“#”,则返回空字符串。 |
host | 设置或返回主机名和当前 URL 的端口号。 |
hostname | 设置或返回当前 URL 的主机名。 |
href | 设置或返回完整的 URL。在浏览器的地址栏上怎么显示它就怎么返回。 |
pathname | 设置或返回当前 URL 的路径部分。 |
port | 设置或返回当前 URL 的端口号。 |
protocol | 设置或返回当前 URL 的协议,取值为 'http:','https:','file:' 等等。 |
search | 设置或返回从问号 (?) 开始的 URL(查询部分)。 |
2、查询字符串参数
/* url search */
function getSearchValue(search, key) {
if (search && key) {
search = search.charAt(0) == "?" ? search.substring(1) : search;
var values = search.split("&");
var i = 0,
len = values.length;
for (i; i < len; i++) {
var value = values[i].split("=");
if (value[0] === key) {
return value[1];
}
}
}
return "";
}
//在任务页面,url包括?taskid,则可以通过以下方法来去的任务id
var taskId = getSearchValue(location.search, "id");