javascript高级程序设计读书笔记(八)

BOM

NO.1 window对象

BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是JS规定的Global对象。

全局变量会变成window对象的属性。
另外,全局变量不能通过delete删除,但是在window上定义的属性可以,在window上定义的属性还有一个好处就是当变量未声明的时候,访问的时候不会报错。

var newValue = oldValue; //报错
var newValue = window.oldValue //不报错

NO.2 窗口关系及框架

如果页面中包含框架,那么每个框架都有自己的window对象,保存在frames集合中。


要访问上面的框架,可以使用
window.frames[0]
window.frames["topFrame"]
top.frames[0]
top.frames["topFrame"]
frames[0]
frames["topFrame"]

最好使用top.frames[0]来引用

和top相对的另一个window对象是parent对象,parent对象始终执行当前框架的直接上层。

窗口位置:
使用如下代码可以取得窗口左边和上边的位置。

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

首先确定screenLeft和screenTop是否存在(在Safari、Opera和Choreme中)则取这两个属性的值,如果不存在(在Firefox中),则取得screenX和screenY的值

窗口大小:
四个浏览器都提供了四个属性: innerWidth,innerHeight,outerWidth,outerHeight

当pageWidth不是一个数值的时候,就是用window.innerWidth取不到的时候,然后判断页面是否处于标准模式,如果是标准模式,用上图那种方式取得浏览器宽度,如果不是,用另外一种。

用reszieTo()和resizeBy()方法可以调整浏览器窗口的大小。其中resizeTo()接收浏览器的新宽度和新高度。resizeBy()方法接收高度差。

导航和打开新窗口:
使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器的窗口。
这个方法可以接受四个参数:要加载的URL,窗口目标,一个特性字符串以及一个布尔值(表示新页面是否取代浏览器历史记录中当前加载页面)
close()方法可以关闭新打开的窗口。

大多数浏览器都有屏蔽弹出窗口程序,如果窗口被内置的屏蔽程序阻止了。你们window.open()会返回null。此时,只要检测这个值就可以确定弹出的窗口是否被屏蔽。
如果是内置屏蔽程序(window.open ==null):

var wroxWin = window.open("http://young.club", "_blank");
if (wroxWin == null){
    alert("弹出窗口被浏览器内置屏蔽程序阻止");
}

如果是浏览器扩展或者其他程序阻止(window.open报错):

var blocked = false;
try{
    var wroxWin = window.open("http://youngi.club","_blank")
    if(wroxWin==null){
        blocked == true;
    }
} catch (ex){
    blocked == true;
}

if (blocked){
    alert("窗口被拦截");
}

间歇调用和超时调用:
javascript是单线程语言,它允许设置超时值和间歇时间来调度代码在特定时刻执行。
超时调用需要使用window对象的setTimeout()方法,它接受两个参数,要执行的代码以及毫秒。
不建议的方式(原因,传递字符可能导致性能损失):

setTimeout("alert('hello world')", 1000);

建议的方式:

setTimeout(function(){
    alert("hello world!");
    },1000);

调用setTimeout后,该方法会返回一个数值ID,表示超时调用,这个ID是计划执行代码的唯一标示符,可以用来取消超时调用

var timeoutId = setTimeout(function(){
    alert("hello world!");
    },1000);
ClearTimeout(timeoutId);

类似,间隙调用:

var setInterval = setTimeout(function(){
    alert("hello world!");
    },1000);
ClearInterval(setInterval);

系统对话框:
alert()和confirm(),prompt()可以调用系统对话框向用户显示消息,系统对话框的外观由浏览器设置或者操作系统决定。

NO.3 location对象

location是最有用的BOM对象之一。它提供了与当前窗口加载的文档有关的信息,他还提供了一些导航功能。它既是window对象的属性,也是document对象的属性。
location可以将URL解析为独立的片段,让开发人员通过不同的属性访问这些片段。
location.search可以访问从问号到URL末尾的所有内容。
location.assign("http://youngi.club")可以立即打开新的URL

location.assign("http://youngi.club")
window.location = "http://youngi.club"
location.href =  "http://youngi.club"

这三条语句等价

location属性还可以对URL进行一系列操作,如下:


这个时候如果用户点击后退按钮,还是能回到前一个页面,如果想要禁止这种行为,可以用replace()方法。

setTimout(function(){
    location.replace("http://youngi.club")
},1000)

reload()方法,重载当前页面,当没有参数的时候,会自动从缓存中重新加载,如果需要从服务器加载,需要传递参数true,reload()方法最好放在最后一行,因为它会导致它之后的代码不执行

location.reload(); //从缓存加载
location.reload(true); //从服务器加载

NO.4 navigator对象

navigator对象包含的属性描述了正在使用的浏览器
navigator.plugins[]表示浏览器所用的插件的集合

NO.5 screen对象

screen对象基本上只是用来表明客户端的能力,包含浏览器窗口外部显示器的信息,如像素高宽

NO.5 history对象

history对象保存中用户上网的历史记录,处于安全考虑,开发人员无法得知用户浏览过的URL。使用go方法可以在用户的历史记录中任意跳转:

history.go(-1); //后退一页
history.go(3); //前进三页
history.go("youngi.club"); //跳到最近的youngi.club页面

history还有一个length属性,保存历史记录的数量

if(history.length == 0){
    //是用户打开窗口的第一个页面
}

NO.6 客户端检测

因为浏览器多样性,所以需要客户端检测方法,来突破或者规避种种局限性。
举个例子,在IE5.0之前的版本不支持document.getElementById()这个DOM方法,所以要使用document.all这个非标准的属性实现相同目的。
能力检测代码:

function getElement(id){
    if (document.getElementById){
        return document.getElementById(id);
    } else if(document.all){
        return document.all[id];
    } else{
        throw new Error {"没办法获取到元素"}
    }
}

NO.7 客户端完整代码

见Javascript高级程序设计(第三版)242页~245

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

推荐阅读更多精彩内容