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

Posted 2021-02-01 1234wu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BOM—浏览器对象模型（Browser Object Model）相关的知识，希望对你有一定的参考价值。

1,javascript 组成部分：

　　1.ECMAscript（核心标准）：定义了基本的语法，比如：if for 数组字符串 ...

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

2,BOM 的组成部分：

　　1.window对象每一个子窗口对应的又是一个window对象
　　2. screen对象
　　3.location对象
　　4.history对象
　　5.Navigator对象
　　6.定时器（两种）
　　7.弹框（三种）
　　8. document (DOM-文档对象模型)

1.1window 对象(表示浏览器窗口):

所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 javascript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 html DOM 的 document 也是 window 对象的属性之一

1.2window 尺寸:

　　查看window尺寸有三种方式适用于不同的情况:

1) w3c标准(适用于老版本ie之外的浏览器)

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

2) 老版本的IE浏览器
标准模式:
　　document.documentElement.clientHeight)
　　document.documentElement.clientWidth)

怪异模式（向后兼容）中:
　　document.body.clientHeight
　　document.body.clientWidth

(如何知道是何种模式?

console.log(document.compatMode)可以查看文档是以什么方式进行解析的
　　 CSS1Compat 标准模式
　　BackCompat 怪异模式

)

function getScreen(){    //获取屏幕的可视宽高
            if (window.innerWidth) {    //如果window底下有这个属性，就用这个，    w3c标准
                return {
                    width : window.innerWidth,
                    height : window.innerHeight
                }
            }else{    //老版本IE
                if(document.compatMode == "CSS1Compat"){   //标准模式
                    return {
                        width : document.documentElement.clientWidth,
                        height : document.documentElement.clientHeight
                    }
                }else{    //怪异模式
                    return {
                        width : document.body.clientWidth,
                        height : document.body.clientHeight
                    }
                }    
            }
        }
        console.log(getScreen())

1.3 其他 Window 方法

　　?window.open() - 打开新窗口
　　?window.close() - 关闭当前窗口
　　?window.moveTo() - 移动当前窗口
　　?window.resizeTo() - 调整当前窗口的尺寸

2.1 screen 对象(包含有关用户屏幕的信息)

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

<script>

document.write("可用宽度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);

</script>

3.1 location对象(用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面)

　　　　　console.log(location.href)    //返回（当前页面的）整个 URL：
        console.log(location.hash)   //hash      哈希值，也叫锚点，比方说a链接中的
        console.log(location.host) // host    设置或返回主机名和当前 URL 的端口号。
        console.log(location.hostname) // hostname    设置或返回当前 URL 的主机名。
        console.log(location.pathname) // pathname    设置或返回当前 URL 的路径部分。
        console.log(location.port) // port    设置或返回当前 URL 的端口号。
        console.log(location.protocol) // protocol    设置或返回当前 URL 的协议。
        console.log(location.search) // search     参数（查询字符串）  设置或返回从问号 (?) 开始的 URL（查询部分）。

　　　　// location.href = "http://www.baidu.com"    //放到某一个事件中去触发

4.1 history对象(包含浏览器的历史记录)

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

<body>
    <a href="http://www.baidu.com">去百度</a>
    <button>后退</button>
    <button>前进</button>

    <script>
        var btn1 = document.getElementsByTagName("button")[0];
        var btn2 = document.getElementsByTagName("button")[1];


        btn1.onclick = function(){
            history.back()
        }
        btn2.onclick = function(){
            history.forward()
        }
    </script>
</body>

5.1 Navigator对象(记录了浏览器的一些信息的对象)

appCodeName 返回浏览器的代码名。
appMinorVersion 返回浏览器的次级版本。
appName 返回浏览器的名称。
appVersion 返回浏览器的平台和版本信息。
browserLanguage 返回当前浏览器的语言。
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass 返回浏览器系统的 CPU 等级。
onLine 返回指明系统是否处于脱机模式的布尔值。
platform 返回运行浏览器的操作系统平台。
systemLanguage 返回 OS 使用的默认语言。
userAgent 返回由客户机发送服务器的 user-agent 头部的值。
userLanguage 返回 OS 的自然语言设置。

<div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>