Javascript从零基础到精通——BOM

BOM（Browser Object Model 浏览器对象模型）

window是全局浏览器内置*对象

1. 表示浏览器中打开的窗口（没有应用于window对象的公开标准，不过所有浏览器都支持该对象）

2. Window 对象表示一个浏览器窗口或一个框架。

3. 在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。

4. 要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。
   例如，可以只写 document，而不必写 window.document。

5. 可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 window.alert()。

除了上面列出的属性和方法，window 对象还实现了核心 JavaScript 所定义的所有全局属性和方法。

1、全局变量默认是挂在window下的

1. 全局变量默认属于window对象
2. 在函数里声明变量如果不写var，那么这个变量就会默认属于window，因此他是全局变量
3. 全局函数默认也是属于window的

var  a = 123;
alert(window.a) 	// 123
function fn () {
    b = 30
}
fn()
console.log(b) 		// 30
console.log(window.b) 		// 30

2、window上的各种属性

使用console.log(window)可以查看:
各种关于浏览器大小、位置的属性
各种常见事件

console.log(window);

注意：window下的各种属性或方法名都不要直接用来作为全局变量命，会冲突

3、window下的子对象

A、location

代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

• window.location.href 当前页面的 URL，可以获取，可以修改（页面跳转）。
• window.location.hostname web 主机的域名
• window.location.pathname 当前页面的路径和文件名
• window.location.port web 主机的端口 （80 或 443）
• window.location.protocol 所使用的 web 协议（http:// 或 https://）
• window.location.search 请求参数（？后面的内容）

window.location.reload(); 刷新页面的方法。
一般情况下给reload()传递一个true，让他刷新，并不使用缓存。
缓存的东西一般为js文件，css文件等。
用这个方法可以让自己不能动的页面动起来了。

        /*
            Location
                该对象中封装了浏览器的地址的信息
                方法：
                    assign()
                        用来跳转到其他的页面，作用和直接修改location一样
                    reload()
                        用于重新加载当前页面，作用和刷新按钮一样
                        如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
                    replace()
                        可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
                            不会生成历史记录，不能使用回退按钮回退
        */
        // 如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
        alert(location);
        // 如果直接将location属性修改为一个完整的路径，或相对路径，则页面会自动跳转到该路径，并且会生成相应的历史记录
        location = "http://www.baidu.com";
        location.assign("http://www.baidu.com");
        location.reload(true);
        location.replace("http://www.baidu.com");

B、window.navigator

代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器

• navigator.appName 返回获取当前浏览器的名称。
• navigator.appVersion 返回 获取当前浏览器的版本号。
• navigator.platform 返回 当前计算机的操作系统。

以上属性已经在逐渐被抛弃了。

一个新的属性将替代这些属性:

• navigator.userAgent 返回浏览器信息（可用此属性判断当前浏览器）

        /*
            Navigator
                代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
                由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
                一般我们只会使用userAgent来判断浏览器的信息
                    userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容
                    不同的浏览器会有不同的userAgent

            chrome的userAgent
            Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36
        */
        console.log(navigator.userAgent);
        var ua = navigator.userAgent;
        console.log(ua);
        if (/firbox/i.test(ua)) {
            alert("火狐浏览器");
        } else if (/Chrome/i.test(ua)) {
            alert("谷歌浏览器");
        } else if (/msie/i.test(ua)) {
            alert("IE浏览器");
        } else if ("ActiveXObject" in window) {
            alert("IE11");
        }

判断当前浏览器类型的代码：

function isBrowser() {
    var userAgent = navigator.userAgent;
    //微信内置浏览器
    if(userAgent.match(/MicroMessenger/i) == 'MicroMessenger') {
        return "MicroMessenger";
    }
    //QQ内置浏览器
    else if(userAgent.match(/QQ/i) == 'QQ') {
        return "QQ";
    }
    //Chrome
    else if(userAgent.match(/Chrome/i) == 'Chrome') {
        return "Chrome";
    }
    //Opera
    else if(userAgent.match(/Opera/i) == 'Opera') {
        return "Opera";
    }
    //Firefox
    else if(userAgent.match(/Firefox/i) == 'Firefox') {
        return "Firefox";
    }
    //Safari
    else if(userAgent.match(/Safari/i) == 'Safari') {
        return "Safari";
    }
    //IE
    else if(!!window.ActiveXObject || "ActiveXObject" in window) {
        return "IE";
    }
    else {
        return "未定义:"+userAgent;
    }
}

C、history

代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录

由于隐私的原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页, 而且该操作只在当次访问时有效

• history.go(1) 参数可写任意整数，正数前进，负数后退
• history.back() 后退
• history.forward() 前进

        /*
            History
                对象可以用来操作浏览器向前或向后翻页
                属性：
                    length  可以获取当前访问的链接数量
                方法：
                    back()  可以用来回退到上一个页面，作用和浏览器的回退按钮一样
                    forward()   可以跳转下一个页面，作用和浏览器的前进按钮一样
                    go()    可以跳转到指定的页面
                                需要一个整数作为参数
                                    1. 表示向前跳转一个页面 相当于forward()
                                    2. 表示向前跳转两个页面
                                    -1. 表示向后跳转一个页面 相当于back()
                                    -2. 表示向后跳转两个页面
        */
        alert(history.length);
        history.back();
        history.forward();
        history.go(1);
        history.go(-1);

D、screen: 屏幕

代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息

window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)

4、window下的弹框方法

• alert()
• prompt()
• confirm()

5、定时器

• setTimeout 超时定时器
• clearTimeout 取消超时定时器
• setInterval 间隔定时器
• clearInterval 取消间隔定时器

6、window.onload

在页面完全载入后(包括图片、css文件等等。)执行脚本代码

7、window.onscroll

滚动条滚轮事件

// window.scrollTop有兼容性，直接取取不到
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop; //兼容

8、window.onresize

窗口缩放事件