JavaScript浏览器BOM

Posted 玖商人不归

tags:

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

目录

window

Window 尺寸

Windows的一些方法

 Window History

一些方法：

Window Location

Window Navigator

 Windows 弹窗

系統提示框

 计时事件

BOM事件

JavaScript的盒子模型

client系列

offset系列

scroll系列

 获取

设置

 获取html

获取body 

获取可视区域的宽度或高度

 回到顶部按钮实现

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

window

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 javascript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 html DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸。

   对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

  • window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
  • window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

  对于 Internet Explorer 8、7、6、5：

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

 或者

  • document.body.clientHeight
  • document.body.clientWidth
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Windows的一些方法

  • window.open() - 打开新窗口

  • window.close() - 关闭当前窗口
  • window.moveTo() - 移动当前窗口
  • window.resizeTo() - 调整当前窗口的尺寸

window的方法

  • open(url, name,specs,replace); 打开窗口

    • url:本地/在线 路径/地址

    • name :_self / _blank 当前窗口 /新的窗口

    • specs:外观设置

    • replace： 规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目

      • true - URL 替换浏览历史中的当前条目。

      • false - URL 在浏览历史中创建新的条目。

  • close(); 关闭窗口

  btns[0].onclick = function () {
            var res = window.open("https://www.taobao.com", "_blank", "width=400,height=400;", false);

            // open方法的返回值是window,是新窗口的浏览器顶层对象
            console.log(res);
        }

        btns[1].onclick = function () {
            // 关闭当前窗口
            window.close();
        }

 Window History

window.history 对象包含浏览器的历史。 

window.history对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

  • go(); 刷新

    • go(0) 刷新

    • go(1)前进

    • go(-1)后退

  • history.back() - 与在浏览器点击后退按钮相同，加载历史列表中的前一个 URL
  • history.forward() - 与在浏览器中点击向前按钮相同，加载历史列表中的下一个 URL。
<body style="background-color: blue;">
    <button>前进</button>
    <button>刷新</button>
    <a href="./2.test.html">第一个页面</a>
    <script>
        var btns =document.getElementsByTagName("button");

        btns[0].onclick = function(){
            // 前进
            // window.history.forward();
            history.go(1);
        }


        btns[1].onclick = function(){
            // 刷新
            // window.history.go();
            window.history.go(0);
        }
<body style="background-color: yellow;">
    <button>后退</button>
    <button>刷新</button>
    <a href="./1.test1.html">第二个页面</a>
    <script>
        var btns =document.getElementsByTagName("button");

        btns[0].onclick = function(){
            // 后退
            // window.history.back();
            history.go(-1);
        }

    </script>

Window Location

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

  • href:完整的url地址（字符串） 可以设置 也可以获取

  • pathname:访问路径

  • protocol 协议 ->https /http

  • port 端口号

  • hostname： 域名

  • hash: 哈希值

  • search:获取?后边的内容包含问号

  • location.hostname 返回 web 主机的域名
  • location.pathname 返回当前页面的路径和文件名
  • location.port 返回 web 主机的端口 （80 或 443）
  • location.protocol 返回所使用的 web 协议（http:// 或 https://）

 console.log(window.location);

        // href:完整的url地址（字符串）  可以设置  也可以获取
        console.log(location.href);
        // 'https://www.taobao.com/'

        // 设置到浏览器的地址栏
        // location.href = "https://www.baidu.com";

        // pathname:访问路径
        // https://error.taobao.com/app/tbhome/common/error.html
        console.log(location.pathname); // ->  /app/tbhome/common/error.html


        // 在线url地址：协议 ->https     域名：www.taobao.com  端口号  https默认端口号443
        console.log(location.protocol); //https

        // port  端口号
        // http://127.0.0.1:5500/09.location.html
        console.log(location.port);

        // hostname： 域名
        // 'https://www.taobao.com/'
        console.log(location.hostname);


        // http://127.0.0.1:5500/09.location.html#hello
        // hash：哈希值  获取#号后边内容 包含
        console.log(location.hash);

        // http://127.0.0.1:5500/09.location.html?name=haha&age=100
        // search:获取?后边的内容包含问号
        console.log(location.search);

Window Navigator

 window.navigator 对象包含有关访问者浏览器的信息。

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

  • navigator 数据可被浏览器使用者更改
  • 一些浏览器对测试站点会识别错误
  • 浏览器无法报告晚于浏览器发布的新操作系统

<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
    // 包含浏览器信息 （浏览器信息对象）
        console.log(window.navigator);

        // 用户信息  userAgent  可以做兼容处理
        console.log(window.navigator.userAgent);  

        // 是否有网络  onLine  有:true  没有:false
        console.log(window.navigator.onLine);

 Windows 弹窗

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

系統提示框

  • alert(提示内容); 弹窗

  • prompt(提示内容); 带有输入的用户提示框

    • 确定：返回输入内容

    • 取消：返回null

  • confirm(提示内容); 用户提示框

    • 确定：返回 true

    • 取消：返回 false

 计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

  • setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
  • setTimeout() - 在指定的毫秒数后执行指定代码。

注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

BOM事件

  • window.onload:保证所有的资源（样式，结构，图片，音频，视频...）加载完毕再去执行函数中的js代码 //DOM事件

  • window.onscroll:滚动事件，在滚动条滚动的过程中实时触发

  • window.onresize:窗口尺寸大小改变触发的事件

   // window.onload:保证所有的资源（样式，结构，图片，音频，视频...）加载完毕再去执行函数中的js代码
       window.onload = function(){
         //js代码
        }
// onscroll  和  onresize 都属于高频发事件
        // window.onscroll:滚动事件，在滚动条滚动的过程中实时触发
        window.onscroll = function () {
            console.log("哈哈");
        }

        // window.onresize:窗口尺寸大小改变触发的事件
        window.onresize = function () {
            console.log("窗口大小变了");
        }

JavaScript的盒子模型

获取到的值都是具体的数值

  • client系列

    • clientWidth / clientHeight: 元素 width/height + 左右padding / 上下padding

    • clientLeft / clientTop:左边框/上边框

  • offset系列

    • offsetWidth / offsetHeight:clientWidth / clientHeight + 左右border / 上下的border

    • offsetLeft / offsetTop:获取距离最近已经定位父级元素的距离，没有已经定位的父级元素就是获取距离body的距离 (从当前元素的外边框到已经定位父级元素的内边框)

    • offsetParent:获取最近已经定位的父级元素,没有已经定位的父级元素获取到的就是body

  • scroll系列

    • scrollWidth / scrollHeight

      • 内容没有溢出就相当于clientWidth/clientHeight

      • 内容有有溢出：左padding/上padding + 真实内容的高度，获取到的值是一个约等于的值，是不够精确的在不同浏览下可能值是不一样，因为不同浏览器对行高，字体大小渲染机制不一样

    • scrollLeft / scrollTop:滚动条滚动的距离

 获取

// 声明了文档类型使用html,没有声明文档类型用body
var scrollL = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;

设置

document.documentElement.scrollLeft = document.body.scrollLeft = 200;
document.documentElement.scrollTop = document.body.scrollTop = 200;

 获取html

document.documentElement 

获取body 

document.body 

  console.log(document.documentElement,document.body);


        // 获取滚动条滚动的距离
        // 声明了文档类型使用html,没有声明文档类型用body
        console.log(document.documentElement.scrollLeft);
        console.log(document.documentElement.scrollTop);

        // 滚动事件
        window.onscroll = function () {
            // 用html
            // console.log(document.documentElement.scrollLeft,document.documentElement.scrollTop);
            // 用body
            // console.log(document.body.scrollLeft,document.body.scrollTop);

            // 获取
            // 兼容处理 
            var scrollL = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
            console.log(scrollL,scrollT);

        }

        box.onclick =function(){
            // 设置
            // document.documentElement.scrollLeft = 200;
            // document.documentElement.scrollTop = 200;

            document.documentElement.scrollLeft = document.body.scrollLeft = 200;
            document.documentElement.scrollTop = document.body.scrollTop = 200;
        }

获取可视区域的宽度或高度

  声明了文档类型就用html,没有声明就用body 

//声明了文档类型用html  没有声明文档类型用body
//var winW = document.body.clientWidth;
//var winH = document.body.clientHeight;

var winW = document.documentElement.clientWidth;
var winH = document.documentElement.clientHeight;

 回到顶部按钮实现

<body style="height: 3000px;background: linear-gradient(yellow,orangered,skyblue);">
    <div>点我</div>
    <script>
        // 首屏高度 + 滚动条最大滚动距离 == 真实页面高度

        var div = document.getElementsByTagName("div")[0];

        // 获取首屏的的高度
        var winH = document.documentElement.clientHeight;
        // 绑定事件
        window.onscroll = function () {
            // 获取滚动条滚动的距离
            var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
            // 首屏的高度 + 滚动条滚动的距离 >= 2500
            if (winH + scrollT >= 2500) {
                div.style.display = "block";
            } else {
                div.style.display = "none";
            }
        }


        // 回到顶部
        div.onclick = function(){
            // 防止用户多次点击先清除定时器
            clearInterval(this.timer);
            // this缓存
            var _this = this;
            // 设置定时器
            this.timer = setInterval(function(){
                // this- >window
                // 获取滚动条滚动距离
                var scroT = document.documentElement.scrollTop || document.body.scrollTop;

                // 在当前滚动距离的基础上 减去一个固定的值
                var speed = scroT - 200;

                // 到达目标值清除定时器
                if(speed <= 0){
                    // clearInterval(div.timer);
                    clearInterval(_this.timer);
                }
                // 设置滚动的距离
                document.documentElement.scrollTop = document.body.scrollTop = speed;
            },30);
        }

以上是关于JavaScript浏览器BOM的主要内容，如果未能解决你的问题，请参考以下文章

前端知识-JavaScript

前端随心记---------Javascript系列（第八节.BOM）

JavaScript操作Bom对象

javascript笔记5-BOM

Javascript内容整理——BOM

前端基础：JavaScript BOM对象