BOM之window对象及location对象

一、window对象

1、浏览器中,window对象既是通过javascript访问浏览器窗口的一个接口,又是ECMAscript规定的global对象。

在全局作用域中声明的变量、函数都会成为window 对象的属性和方法。(通过.可以访问)

差别:

定义全局变量和在window对象上直接定义属性有差别。全局变量不能通过delete操作符来删除,window对象上定义的属性可以
尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个未声明的变量是否存在(返回undefined)

2、如果页面中包含框架,则每个框架都有自己的window 对象,并且保存在frames集合中。

可以通过数值索引或者框架名称(name属性)来访问相应的window对象。

使用top 而非window来引用这些框架,因为top对象始终指向最高层的框架,也就是浏览器窗口。

toptop对象始终指向最高层的框架
parent始终指向当前框架的直接上层框架
self始终指向window

某些情况下,top和window相等。没有框架的情况下,parent一定等于top.

3、窗口位置、大小

用来修改window对象位置的属性和方法

IE、Safari 、Opera 、ChromescreenLeft和screenTop
FirefoxscreenX和screenY

window对象大小的属性和方法

浏览器outerWidth、outerHeightinnerWidth、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");


 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值