第8章、BOM

8.1 window对象

BOM的核心对象是window,它表示浏览器的一个实例。在网页中定义的任何一个对象、变量和函数,都以window作为其Global对象,因此有权限访问parseInt()等方法。

8.1.1 全局作用域

所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。但是定义全局变量和在window对象上直接定义属性有一个差别:全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以(因为全局变量有一个名为[[Configurable]]的特性,这个特性被设置为false,因此不能通过delete操作符删除)。

var a=1;
window.b=2;
console.log(window.a); // 1

delete window.a;
delete window.b;
console.log(window.a);  // 1
console.log(window.b);  // undefined

尝试访问未声明的变量会抛出错误,但是通过window对象的属性进行查询就可以知道某个未声明的全局变量是否存在。

var b = a;  // 报错
var b = window.a;  // b为undefined
8.1.2 窗口关系及框架

在多框架的页面中,因为每个框架都有自身的window属性,但top对象始终指向最高层框架,也就是浏览器窗口。parent对象表示当前框架的父框架。self对象始终指向window,与window对象可以互换使用。这些对象都是window对象的属性,可以通过window.parent,window.top访问。

8.1.3 窗口位置

IE、Safari、Opera和chrome用screenLeft和screenTop分别表示窗口相对于屏幕左边和上边的距离,Firefox用screenX和screenY提供同样的窗口位置信息。使用下列代码可跨浏览器取得窗口位置。

var leftScreen = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topScreen = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
8.1.4 窗口大小

现代浏览器(IE9+)提供4个属性表示窗口大小:innerWidth,innerHeight,outerWidth,outerHeight。其中innerWidth,innerHeight表示页面视图区域的大小(减去网页边框的可见区域),outerWidth,outerHeight表示浏览器窗口本身的尺寸。
早期浏览器(IE8以前)通过DOM提供相关信息,标准模式下document.documentElement.clientWidth,document.documentElement.clientHeight保存视口信息,混杂模式下document.body.clientWidth,document.body.clientHeight表示视口信息。

// 表示去除边框的浏览器范围大小
console.log("window.innerWidth",window.innerWidth);
console.log("window.innerHeight",window.innerHeight);
// 表示整个浏览器窗口大小
console.log("window.outerWidth",window.outerWidth);
console.log("window.outerHeight",window.outerHeight);
// 表示去除边框和滚动条的浏览器范围大小
console.log("document.documentElement.clientWidth",document.documentElement.clientWidth);
console.log("document.documentElement.clientHeight",document.documentElement.clientHeight);
// 表示body元素的大小
console.log("document.body.clientWidth",document.body.clientWidth);
console.log("document.body.clientHeight",document.body.clientHeight);
8.1.5 导航和打开窗口

使用window.open()方法可以导航到一个特定的URL,接受4个参数:要加载的URL,窗口目标,一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只需要传入第一个参数即可。打开的窗口可以通过top.close()进行关闭。关闭打开的窗口后,其引用仍然存在,可以通过其引用的closed属性来判断是否关闭掉了打开的窗口。
当弹出窗口被屏蔽时,如果是被浏览器内置屏蔽程序阻止的,则window.open()很可能会返回null,如果是被浏览器扩展或其他程序阻止的,则会报错。

8.1.6 间歇调用和超时调用

超时调用,window.setTimeout(),接受两个参数,第一个是要执行的代码,第二个是经过该时间后将改代码添加到Javascript的任务队列中。由于Javascript是单线程语言,所以经过给定的时间后代码不一定会执行,而是添加到当前任务队列中,队列是空就会立即执行,否则需要等待队列中前面的代码执行完毕才会执行。
setTimeout()调用后会返回一个唯一标识ID,setTimeout()里的代码执行前,可以通过clearTimeout(ID)方法将超时调用清除。
间歇调用,window.setInterval(),参数与setTimeout()方法相同,每次经过给定时间间隔将代码添加到任务队列中执行。可使用setTimeout()代替:

var a=0;
var b=10;
function time() {
    a++;
    if(a<b){
        setTimeout(time,1000);
    }else{
        alert("OK");
    }
}
setTimeout(time,1000);
8.1.7 系统对话框

浏览器通过alert()、confirm()、prompt()方法可以调用系统对话框向用户显示消息,它们的外观由操作系统及浏览器本身设置决定,而不是CSS决定。通过这几个方法打开的对话框都是同步的,也就是说,显示这些对话框的时候代码会停止执行,关闭对话框的时候代码又会恢复执行。
alert()方法接收一个字符串并将其显示给用户。通常用来生成警告类的对话框显示一些用户无法控制的信息。
confirm()方法同样接收一个字符串显示给用户,它有两个选择按钮,一个是确认,一个是取消,点击确认该方法会返回true,点击取消或者单击右上角的X会返回false。
prompt()方法创建的对话框会带有一个输入框和确认取消两个按钮,接收两个参数,一个是显示给用户的提示信息,另一个是其自带输入框中的默认值,点击确认则返回输入框中的内容,点击取消或者关闭对话框返回null。


8.2 location对象

location对象提供了当前窗口中加载的文档有关信息。还提供了一些导航功能,它既是window对象的属性,也是document对象的属性,即window.location和document.location引用的是同一个对象。所有属性文档

8.2.1 查询字符串参数

location.search可以返回URL中从问号到结尾的所有内容,通过下列方法可以解析查询字符串,将其转化为一个包含所有参数的对象。

function changeSearchString() {

    // 获取查询字符串,创建储存信息对象
    var str = location.search;
    var obj = {};

    // 查询字符串存在时去除问号
    if(str.length>0){
        str = str.substring(1);
    }else {
        return obj;
    }

    // 分割查询字符串为一个数组,创建临时变量
    var items = str.split("&");
    var item,name,value,i;

    // 解析分割后的字符串,因为查询字符串是被编码过的,用decodeURIComponent()方法解码,并将每一项添加到obj对象当中
    for(i =0; i<items.length; i++){
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        if(name.length){
            obj[name] = value;
        }
    }
    return obj;
}
8.2.2 位置操作

location.assign()方法接收一个URL,立即打开新的URL并在历史记录中生成记录,如果是将location.href或者window.location设置为一个新的URL值,也会以该值调用location.assign()方法。可以使用后退按钮退回之前的页面。
location.replace()与location.assign()方法相似,也是打开新的URL,但location.replace()方法不会生成历史记录,相当于用新的URL代替了原来的页面。无法使用后退按钮回到之前的页面。
location.reload()方法的作用是重新加载当前显示的页面,不传任何参数时,浏览器会以最有效的方式重新加载,即自上次请求以来没有改变过,则从缓存中加载。传递true作为参数时,会冲服务器重新加载当前页面。


8.3 navigator对象

navigator对象是识别客户端浏览器的事实标准。navigator对象的属性通常用来检测显示页面的网页浏览器类型。所有属性文档

8.4 screen对象

screen对象在编程中用处不大,基本只用来表明客户端的能力。包括浏览器窗口外部的显示器信息。

8.5 history对象

history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起,因为history是window对象的属性,所以每个浏览器窗口、每个标签乃至每个框架,都有自己的history对象与特定的window对象相关联。
history.go()方法可以在历史记录中任意跳转,这个方法接收一个参数,传入整数值时,跳转相应的页面:

// 前进一页,相当于前进按钮,简写方法为history.forward();
history.go(1);

// 后退一页,相当于后退按钮,简写方法为history.back();
history.go(-1);
// 前进两页
history.go(2);

传入字符串时,跳转到历史记录中包含该字符串的第一个页面,可能前进,也可能后退

// 跳转到最近的baidu.com页面
history.go("baidu.com");

history对象还有一个length属性,保存着历史记录的数量,即当length属性为0的时候,表示这是浏览器当前标签打开的第一个页面。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容

  • BOM:浏览器对象模型 这一章,主要讲了window对象,location对象,navigator对象,scree...
    __越过山丘__阅读 218评论 0 0
  • 1.我怎么如此幸运,今天看了沈勤姐姐下载的简书的文章,我的小灵魂跟我对接,我也要做这样的程序,我也要下载这个简书来...
    史真如阅读 321评论 0 0
  • 在腻儿生命中曾有过一段灰暗时光,那时她“邂逅”安妮宝贝。于是几乎读遍关于安妮宝贝所有的文字,疯狂的痴迷她。(读过...
    美腻太太阅读 256评论 0 1
  • 我 想拉着你的手 走遍天涯海角 永不分开! 我的宝贝你别哭 别再为...
    MC孙震呢阅读 710评论 0 0