$8 BOM(浏览器对象模型)

浏览器对象模型是以window对象为依托的,window在ES中是全局对象,因而所有的全局变量和函数都是它的属性,并且所有的原生的构造函数也都在它的命名空间下。

1. window对象:

A. BOM的核心对象;

同时扮演着全局对象的角色。
全局变量与window对象上定义的属性区别:全局变量不能通过delete删除

    var age=29;
    window.color="red";
    delete window.age;
    delete window.color;
    console.log(age);//29
    console.log(window.color); //undefined
B. 窗口位置

a.窗口相对于屏幕左边和上边的位置:

screenLeft, screenTop; //IE Safari Opera Chrome
screenX, screenY; //Safari Chrome Firefox 
var leftPos=(typeof  window.screenLeft == "number")? window.screenLeft : window.screenX;
var topPos=(typeof window.screenTop == "number")? window.screenTop : window.screenY;

b.窗口精确地移动到某个位置:

window.moveBy(0,100) //移动了
window.moveTo(0,100) //移动到
C. 窗口大小:

a.跨浏览器确定窗口大小不是一件简单的事情,因为浏览器的原因,但是可以确定页面视口的大小(去掉边框):

var pageWidth=window.innerWidth;
var pageHight=window.innerHeight;
    
if(typeof pageWidth != "number"){
        if(document.compatMode == "CSS1Compat"){    //标准模式
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
        }
        else{        //混杂模式
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
        }
}

b.调整窗口大小:

window.resizeTo(100,100);
window.resizeBy(100,100);
D. 导航和打开窗口:
window.open()   //打开一个新的浏览器窗口
E. 间歇调用setInterval和超时调用setTimeout

a.超时调用:每个超时调用都有一个唯一的数值ID,可以通过该ID来取消超时调用。

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

取消clearTimeout(timeoutId)//在指定的时间尚未过去之前取消超时调用,会导致setTimeout里面的function代码没有执行。

b.间歇调用:直到间歇调用被取消或者页面卸载才会停止。该方法也有其ID。

var num =0;
var max = 10;
var intervalId = null;
    
function incrementNumber(){
        num++;  
        if(num == max){
            clearInterval(intervalId);
        }
        else{
            console.log(num);     //1-9
        }
    }
intervalId = setInterval(incrementNumber,1000)

很少真正使用间歇调用,可以使用超时调用来模拟间歇调用,间歇调用缺点:
1.后一个间歇调用有可能会在前一个间歇调用结束之前启动;
2.间歇调用需要追踪其ID,以便于取消间歇调用。

var num =0;
var max = 10;
var intervalId = null;  
function incrementNumber(){
        num++;
    //如果执行次数未达到设定的值,则设置另一次超时调用
        if(num < max){
            console.log(num);
            setTimeout(incrementNumber,1000);
        }
}   
intervalId = setTimeout(incrementNumber,1000);
F. 系统对话框:

1.alert() (用户无法控制的对话框,警告作用)
2.confirm() (用户可以选择是否执行操作)

    if(confirm("你确定进入下一页吗?")){
        alert("欢迎")
    }
    else{
        alert("再见")
    }
Paste_Image.png

3.prompt() (用户可以输入文本)

    var result=prompt("你叫什么名字?","");
    if(result != null){
        alert("欢迎,"+result);
    }
Paste_Image.png

2. location对象

a. location对象提供了当前页面的与文档有关的信息。它既是window的属性,又是document的属性,即window.location==document.location.

b. 作用:解析Url,将Url解析为独立的片段。可以通过location的不同属性访问url中的不同信息(hash host hostname href pathname port protocol search)

c.获取url中的参数:

    function getQueryStringArgs() {
        var qs=location.search.length>0? location.search.substring(1):"";
        var args={};
        var items=qs.length ? qs.split("&"):[];
        var item=null,name=null,value=null;
        for(var i=0;i<items.length;i++){
            item=items[i].split("=");
            name=decodeURIComponent(item[0]);
            value=decodeURIComponent(item[1]);
            if(name.length){
                args[name]=value;
            }
        }
        return args;
    }

d. 位置操作:
打开新的URL地址并且在浏览器的历史记录中生成记录(可后退)

    location.href="http://baidu.com"
    window.location="http://baidu.com"
    location.assign("http://baidu.com")

打开新的URL并且不生成记录(不可后退)

    location.replace("http://baidu.com")

重新加载页面:reload

    location.reload()     //有可能加载浏览器缓存页面
    location.reload(true)  //重新从服务器进行请求

3. navigator对象

主要作用:识别客户端浏览器
a. 检测插件:plugins数组中包含插件的各种信息。

        //非ie浏览器有效,因为navigator是NS开发的,IE不支持。
        function hasPlugin(name) {
            name=name.toLowerCase();
            for(var i=0;i<navigator.plugins.length;i++){
                if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
                    return true;
                }
            }
            return false;
        }
        console.log(hasPlugin("flash"));

ie浏览器需要利用COM对象来进行检测。

4. screen对象

主要用于表示浏览器窗口信息。比如调整窗口大小时:

    window.resizeTo(screen.availWidth,screen.availHeight)

5. history对象:

保存上网的历史记录。
作用:创建前进后退按钮,以及检测当前页面是否是用户打开的第一个页面。
常见用法:

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

推荐阅读更多精彩内容