526互联

03_JavaScript BOM编程

发布时间 2023-10-31 15:28:27作者: 城市炊烟

一、BOM概述

1.1、Web API

1.1.1、API的概念

​ API（Application Programming Interface，应用程序接口）是一些预先定义的函数，或指软件系统不同组成部分衔接的约定。 用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程，而又无需访问源码，或理解内部工作机制的细节。

  • 任何开发语言都有自己的API
  • API的特征输入和输出(I/O)
    • var max = Math.max(1, 2, 3);
  • API的使用方法(console.log('adf'))

1.1.2、Web API的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

Web API：https://developer.mozilla.org/zh-CN/docs/Web/API

1.1.3、JavaScript组成部分

ECMAScript - JavaScript的核心

​ 定义了JavaScript 的语法规范

​ JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关。

BOM - 浏览器对象模型

​ 一套操作浏览器功能的API

​ 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

​ 一套操作页面元素的API

​ DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

1.2、BOM概述

1.2.1、什么是BOM

​ BOM是browser object model的缩写，简称浏览器对象模型。

​ BOM提供了独立于内容而与浏览器窗口进行交互的对象。

​ 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。

​ BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

​ BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C。

​ BOM最初是Netscape浏览器标准的一部分。

1.2.2、BOM层次结构

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。

1572956482735

1.2.3、BOM可以实现的功能

​ BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。

​ 但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能！

二、window对象

2.1、window对象的使用

​ window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。

​ window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如，可以只写document，而不必写 window.document。

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

​ 示例：

document.write("直接使用document来调用<br>");
window.document.write("使用window来调用document<br>");

// alert("直接调用alert");
// window.alert("window调用alert");

var a = 10;
document.write(window.a);

​ 也就是说调用window对象的属性或方法可以省略window。

2.2、三种弹出框

1、alert()：显示带有一段消息和一个确认按钮的警告框。

1572956755638

// 1、alert()：显示带有一段消息和一个确认按钮的警告框
// 参数: 任意类型的参数,只需要传递一个参数即可 （基本上都是字符串类）
// 无返回值
var alertReturn = alert("Hello"); // 一个方法如果没有返回值,那么就是undefined
console.log(alertReturn);

2、confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框.返回值为布尔值；如果点击确定则返回true,点击取消返回false。

1572956781925

 // 2、confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框.返回值为布尔值；如果点击确定则返回true,点击取消返回false。
// 参数: 任意类型的参数,只需要传递一个参数即可 （基本上都是字符串类）
// 布尔类型
var confirmReturn = confirm("是否删除?");
console.log(confirmReturn);

3、prompt()：显示可提示用户输入的对话框。第一个参数是提示,第二个参数是默认值(可选);返回值为输入的值，取消返回null；需要注意的是，返回的输入值是一个string类型的数据。

1572956822510

// 3、prompt()：显示带一段消息和用户输入的对话框并且有确定和取消按钮。
// 第一个参数是提示,第二个参数是默认值(可选,输入框的默认值);
// 点击确定,返回值为输入的值，取消返回null；需要注意的是，返回的输入值是一个string类型的数据。
var ageStr = prompt("请输入您的年龄", "只能输入1-99的数值");
var ageStr = prompt("请输入您的年龄(1-99)");
console.log(ageStr);

// 只要输入的不是1-99,则继续输入
while (true) {
    var ageStr = prompt("请输入您的年龄(1-99)");
    // 把输入的转换为数值,判断是否可以转换为数值
    var age = Number(ageStr); // 非数值字符串,NaN;数值字符串直接转换为数值
    if (!isNaN(age) && age >= 1 && age <= 99) {
        console.log("您的年龄是:" + age);
        break;
    }
}

2.3、窗体控制

1、open()：打开一个窗体

​ 语法:window.open(URL,name,[specs]),该方法返回打开窗口的引用

​ 参数介绍:

​ URL 可选。打开指定的页面的URL。如果没有指定URL，打开与新的空白窗口

​ name 可选。指定窗口的名称。

​ specs 一个逗号分隔的项目列表。支持以下值：

​ height=pixels 窗口的高度。最小.值为100

​ left=pixels​ 该窗口距离屏幕左侧的位置

​ top=pixels​ 该窗口距离屏幕顶部的位置

​ width=pixels​ 窗口的宽度.最小.值为100

注:窗口相对位置是以屏幕为基准。

<script>
    window.open("page.html","newWind","width=520,height=420,left=100,top=30")
</script>

2、close()：关闭浏览器窗口。

3、moveBy()：可相对窗口的当前坐标把它移动指定的像素。

​ window.moveBy(x,y)

​ x 要把窗口在x轴移动的像素数,可以是正、负数值。

​ y 要把窗口在y轴移动的像素数,可以是正、负数值。

4、moveTo()：把窗口的左上角移动到一个指定的坐标。

​ window.moveTo(x,y)

​ x 窗口新位置的 x 坐标,可以是正、负数值。

​ y 窗口新位置的 y 坐标,可以是正、负数值。

5、resizeTo()：把窗口的大小调整到指定的宽度和高度。

​ resizeTo(width,height)
​ width 必需。想要调整到的窗口的宽度。以像素计。

​ height 可选。想要调整到的窗口的高度。以像素计。

​ 注: 有最小值

6、resizeBy()：按照指定的像素调整窗口的大小。

​ resizeBy(width,height)

​ width 必需。要使窗口宽度增加的像素数。可以是正、负数值。

​ height 可选。要使窗口高度增加的像素数。可以是正、负数值。

​ 注: 有最小值

7、focus()：把键盘焦点给予一个窗口。可确保新的窗口得到焦点。

跨域问题解决方法：https://blog.csdn.net/farmwang/article/details/79850818

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn1">打开一个新窗口</button>
    <button id="btn2">关闭新窗口</button>
    <button id="btn3">逐次移动新窗口位置</button>
    <button id="btn4">直接设置新窗口位置</button>
    <button id="btn5">逐次改变新窗口大小</button>
    <button id="btn6">直接设置新窗口大小</button>
    <button id="btn7">获取窗口名称</button>

    <script>
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var btn3 = document.getElementById("btn3");
        var btn4 = document.getElementById("btn4");
        var btn5 = document.getElementById("btn5");
        var btn6 = document.getElementById("btn6");
        var btn7 = document.getElementById("btn7");

        var newWindow; // 没有赋值是undefined

        // 当点击按钮1的时候,打开新窗口
        btn1.onclick = function () {
            // open(URL,name,spacs)：打开一个窗体
            // URL:可以是一个页面或一张图片
            // name: 给新创建指定名称
            // spacs：相关窗口配置 width、height、left、top
            // 所谓的左侧和右侧都是基于电脑屏幕
            // 这三个参数都是字符串类型
            // open方法返回一个window对象的引用
            newWindow = open("images/1.jpg", "newWindow", "width=300,height=200,left=100,top=100");
            // console.log(newWindow.innerHeight)
            // console.log(newWindow.outerHeight);
        }

        btn2.onclick = function () {
            // console.log(newWindow);
            // close()：关闭浏览器窗口
            if (newWindow) { // undefined -> false   
                newWindow.close();
            }

            // console.log(newWindow.closed);
        }

        // 点击btn3,报错:Blocked a frame with origin "null" from accessing a cross-origin frame.
        // 跨域不允许你js操作另外一二窗口
        // file:///D:/VSCode_workspace/0715/03_%E7%AA%97%E4%BD%93%E6%8E%A7%E5%88%B6.html
        btn3.onclick = function () {
            // moveBy()：可相对窗口的当前坐标把它移动指定的像素。
            // x  要把窗口右移的像素数,可以是正、负数值。
            // y  要把窗口下移的像素数,可以是正、负数值。
            if (newWindow) {
                newWindow.moveBy(10, 10);
                newWindow.focus();
            }
        }

        // 同源策略: 
        // 协议  ip地址  端口号  资源路径
        // 安装Live Server插件,基于协议访问页面


        btn4.onclick = function () {
            // moveTo()：把窗口的左上角移动到一个指定的坐标
            // x  要把窗口右移的像素数,可以是正、负数值。
            // y  要把窗口下移的像素数,可以是正、负数值。
            if (newWindow) {
                newWindow.moveTo(10, 10);
                newWindow.focus();
            }
        }

        btn5.onclick = function () {
            // resizeBy()：按照指定的像素调整窗口的大小
            // width 必需。 要使窗口宽度增加的像素数。 可以是正、 负数值。
            // height 可选。 要使窗口高度增加的像素数。 可以是正、 负数值。
            if (newWindow) {
                newWindow.resizeBy(10, 10);
                newWindow.focus();
            }
        }

        btn6.onclick = function () {
            // resizeTo()：把窗口的大小调整到指定的宽度和高度
            // width 必需。 要使窗口宽度增加的像素数。 可以是正、 负数值。
            // height 可选。 要使窗口高度增加的像素数。 可以是正、 负数值。
            if (newWindow) {
                newWindow.resizeTo(400, 400);
                newWindow.focus();
            }
        }

        btn7.onclick = function () {
            console.log(newWindow.name);
        }
    </script>
</body>

</html>

2.4、窗体滚动

1、scrollBy(xnum,ynum)：按照指定的像素值来滚动内容。

​ xnum 把文档向右滚动的像素数。

​ ynum 把文档向下滚动的像素数。

2、scrollTo(xpos,ypos)：把内容滚动到指定的坐标。

​ xpos 要在窗口文档显示区左上角显示的文档的 x 坐标。

​ ypos 要在窗口文档显示区左上角显示的文档的 y 坐标。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 1600px;
        }

        div {
            width: 300px;
            border: 1px solid black;
            background: red;
            position: fixed;
            right: 0;
            top: 100px;
        }
    </style>
</head>

<body>
    <div>
        <button id="btn1">scrollBy逐次滚动内容</button>
        <button id="btn2">scrollTo直接滚到指定位置</button>
        <button id="btn3">打印当前窗口内容</button>
    </div>
    <script>
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var btn3 = document.getElementById("btn3");

        btn1.onclick = function () {
            scrollBy(10, 10);
        }

        btn2.onclick = function () {
            scrollTo(0, 0)
        }

        btn3.onclick = function () {
            // console.log("点击了按钮");
            print();
        }
    </script>
    <hr>
    <p>1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </p>
    ....
</body>

</html>

2.5、窗体打印

print()：打印当前窗口的内容。

​ 调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮。通常，这会产生一个对话框，让用户可以取消或定制打印请求。

1572957270150

2.6、定时器(重点)

window对象中处理时间和间隔的函数有4个：

​ setTimeout()函数、clearTimeout()函数

​ setInterval()函数、clearInterval()函数

2.6.1、延时型定时器

1572957377729

​ setTimeout()：定义延时定时器,在指定的时间后调用函数

​ 语法：

​ setTimeout(fun,time);

​ 其中参数fun：函数体或函数名;time指定时间，单位为毫秒。其返回值有一个id,代表当前的这个setTimeout()函数。

​ clearTimeout(id)：清除延时定时器,取消指定id的setTimeout函数。

示范代码：

setTimeout(function () {
    document.write("隔3秒后触发");
}, 3000)    //在3秒后输出

setTimeout(fun1, 5000);     //在5秒后输出

function fun1() {
    document.write("函数名的方式5秒后触发");
}

2.6.2、间隔型定时器

​ setInterval()：定义间隔型定时器,在间隔指定的事件后重复调用函数。

​ 语法：
​ setInterval(fun1,time)　　

​ fun：函数体或函数名，time指定的时间，单位为毫秒。会返回一个值id。

​ clearInterval(id)：清除间隔型定时器

​ 参数id是setInterval()函数返回的值，根据这个值可以停止返回值为idsetInterval()的执行。

示范代码：

var h = setInterval(function () {
    document.write("3秒输出一次<br/>");
}, 3000);

注意，JavaScript是单线程的，因此，这个定时函数实际上是通过插入执行队列的方式来实现。

2.6.3、案例

动态时间案例1：

​ 由于涉及到时间的显示问题，所以要用到日期对象Date，还有时间在不停地走，因此需要不断地调用函数，所以要用到Windows的定时器setInterval( )方法。

<script>
    function disptime(){
        var today = new Date(); //获得当前时间
        var hh = today.getHours();  //获得小时、分钟、秒
        var mm = today.getMinutes();
        var ss = today.getSeconds();
        document.getElementById("myclock").innerHTML=hh+":"+mm+":"+ss;
    }
    window.setInterval(disptime,1000);
</script>

动态时间案例2：

<!-- 这个div用来显示动态时间 -->
<div id="timeDiv">
    <!-- 我们不能给这个div里面写内容,因为时间是不固定,需要通过JS来设置 -->
</div>

<script>
    //给页面元素设置文本内容,那么肯定要获取到元素节点,然后通过元素节点.innerText来设置文本内容

    //获取到timeDiv元素节点
    var timeDiv = document.getElementById("timeDiv");

    //这个函数是用来给timeDiv设置字符串
    function setTimeStr() {
        //获取到系统时间,然后给其设置内容
        var time = new Date();

        //获取到年月日
        var year = time.getFullYear();
        var month = time.getMonth()+1;
        var date = time.getDate();

        //获取时分秒
        var hour = time.getHours();

        //ampStr用来表示上午或下午
        var apmStr = hour >= 12 ?  "下午" : "上午";

        var minute = time.getMinutes();
        var second = time.getSeconds();

        timeDiv.innerText = "今天是:"+year+"年"+getTwo(month)+"月"+getTwo(date)+"日,现在时间是:"+apmStr+" "
            +getTwo(hour)+":"+getTwo(minute)+":"+getTwo(second);
    }

    //让timeDiv里面的内容,每一秒改变一次
    setInterval(setTimeStr,1000);

    //为了解决第一秒没有显示时间的小bug,可以提前调用一次
    setTimeStr();

    //月日时分秒可能是个位数,那么如果是个位数,我们需要对齐进行格式化处理
    //如果小于10,那么给其拼字符串"0"
    function getTwo(t){ //t表示形参,回头可以把月 日 时分秒作为实参传递进来进行处理
        return t < 10 ? "0"+t : t;
    }

</script>

图片时间案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="imgClock">

  </div>
  <script>
    var imgClock = document.getElementById("imgClock");

    function handleTime() {
      imgClock.innerHTML = "";
      var date = new Date();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      changeImg(hours);
      changeColon();
      changeImg(minutes);
      changeColon();
      changeImg(seconds);
    }

    // 处理数值
    function changeImg(num) {
      var imgEle1 = document.createElement("img");
      var imgEle2 = document.createElement("img");
      if (num < 10) {
        imgEle1.src = "images/0.png";
        imgEle2.src = "images/" + num + ".png";
      } else {
        var num1 = parseInt(num / 10);
        var num2 = num % 10;
        imgEle1.src = "images/" + num1 + ".png";
        imgEle2.src = "images/" + num2 + ".png";
      }
      imgClock.appendChild(imgEle1);
      imgClock.appendChild(imgEle2);
    }

    // 处理冒号
    function changeColon() {
      var colonImg = document.createElement("img");
      colonImg.src = "images/10.png";
      imgClock.appendChild(colonImg);
    }

    // 先调用一次
    handleTime();
    setInterval(handleTime, 1000);
  </script>
</body>

</html>

简易轮播图案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .slideDiv {
            border: 1px solid black;
            width: 640px;
            height: 400px;
        }

        .slideDiv>img {
            width: 640px;
        }
    </style>
</head>

<body>
    <!-- 
        轮播图:
            图片切换轮播    京东
            滑动轮播        淘宝
     -->
    <div id="slideDiv" class="slideDiv">
        <img src="images/1.jpg" alt="" id="slideImg">
    </div>

    <script>
        // 每隔3s中切换另外一张图片
        // 1.jpg  2.jpg  3.jpg  4.jpg  ->1.jpg
        var slideImg = document.getElementById("slideImg");

        // 图片编号
        var imgNum = 1;

        setInterval(function () {
            if (imgNum == 4) {
                imgNum = 1;
            } else {
                imgNum++;
            }
            console.log(imgNum)
            // 修改img的src属性
            slideImg.src = "images/" + imgNum + ".jpg";
        }, 3000)
    </script>
</body>

</html>

2.7、window对象常用属性(重点)

​ innerWidth 返回窗口的文档显示区的宽度。

​ innerHeight 返回窗口的文档显示区的高度。

​ name ​ 设置或返回窗口的名称。

​ outerheight 返回窗口的外部高度。

​ outerwidth 返回窗口的外部宽度。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        document.write("窗口文档显示区域的宽度:" + innerWidth + "<br>");
        document.write("窗口文档显示区域的高度:" + innerHeight + "<br>");

        document.write("窗口的宽度:" + outerWidth + "<br>");
        document.write("窗口的高度:" + outerHeight + "<br>");
    </script>
</body>

</html>

三、History对象

​ History 对象包含用户（在浏览器窗口中）访问过的 URL。

​ History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

3.1、History对象属性

属性 说明
length 返回当前窗口历史列表中的网址数

3.2、History对象方法

方法 说明
back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go(num) 加载 history 列表中的某个具体页面

History对象：back() 方法

​ back() 方法可加载历史列表中的前一个 URL（如果存在）。

​ 调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。

History对象：forward() 方法

​ forward() 方法可加载历史列表中的下一个 URL。

​ 调用该方法的效果等价于点击前进按钮或调用 history.go(1)。

History对象：go() 方法

​ go() 方法可加载历史列表中的某个具体的页面。

​ 该参数可以是数字，使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。（-1上一个页面，1前进一个页面)。或一个字符串，字符串必须是局部或完整的URL，该函数会去匹配字符串的第一个URL。

​ history.go(number|URL)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="春.html">春</a>
    <a href="夏.html">夏</a>
    <a href="秋.html">秋</a>
    <a href="冬.html">冬</a>
    <hr>
    <h1>这里是春天页面</h1>

    <hr>
    <button id="btn1">后退</button>
    <button id="btn2">前进</button>

    <script>
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        btn1.onclick = function () {
            history.back();
        }

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

</html>

四、Location 对象

​ Location 对象包含有关当前 URL 的信息。

​ Location 对象是 window 对象的一部分，可通过 window.location 属性对其进行访问。

4.1、Location对象属性

属性 描述
hash 返回一个URL的锚部分(锚点)
host 返回一个URL的主机名和端口
hostname 返回URL的主机名
href 返回完整的URL
pathname 返回的URL路径名。
port 返回一个URL服务器使用的端口号
protocol 返回一个URL协议
search 返回一个URL的查询部分 ？之后

4.2、Location对象方法

方法 说明
assign() 载入一个新的文档 location.assign(URL)
reload() 重新载入当前文档 location.reload();
replace() 用新的文档替换当前文档 location.replace(newURL)

​ window.location.assign(url) ： 加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

​ window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，没有后退返回上一页的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn1">assign载入一个新的文档</button>
    <button id="btn2">reload重新加载文档</button>
    <button id="btn3">replace替换当前文档</button>
    <script>
        // http://127.0.0.1:5500/0715/10_location%E5%AF%B9%E8%B1%A1.html?userName=zhangsan&&userPwd=123#abc
        // url: 协议://ip地址:端口号/资源路径?请求内容(搜索内容)#锚链接

        console.log("完整的URL地址:" + location.href);
        console.log("协议:" + location.protocol);
        console.log("ip地址和端口号:" + location.host);
        console.log("ip地址:" + location.hostname)
        console.log("端口号:" + location.port);
        console.log("完整资源路径:" + location.pathname);
        console.log("搜索内容:" + location.search);
        console.log("锚部分:" + location.hash);

        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var btn3 = document.getElementById("btn3");

        btn1.onclick = function () {
            location.assign("http://www.baidu.com");
        }

        btn2.onclick = function () {
            location.reload();
        }

        btn3.onclick = function () {
            location.replace("http://www.baidu.com");
        }
    </script>
</body>

</html>

五、Screen 对象

Screen 对象包含有关客户端显示屏幕的信息。

属性 说明
availHeight 返回屏幕的高度（不包括Windows任务栏）
availWidth 返回屏幕的宽度（不包括Windows任务栏）
colorDepth 返回目标设备或缓冲器上的调色板的比特深度
height 返回屏幕的总高度
pixelDepth 返回屏幕的颜色分辨率（每像素的位数）
width 返回屏幕的总宽度 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        console.log("不包含任务栏的屏幕高度:" + screen.availHeight);
        console.log("不包含任务栏的屏幕宽度:" + screen.availWidth);

        console.log("屏幕高度:" + screen.height);
        console.log("屏幕宽度:" + screen.width);
    </script>
</body>

</html>

六、Navigator 对象

Navigator 对象包含有关浏览器的信息。

属性 说明
appCodeName 返回浏览器的代码名appCodeName 属性是一个只读字符串，声明了浏览器的代码名。在所有以 Netscape 代码为基础的浏览器中，它的值是 "Mozilla"。为了兼容起见，在 Microsoft 的浏览器中，它的值也是 "Mozilla"。
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
platform 返回运行浏览器的操作系统平台
userAgent 返回由客户机发送服务器的user-agent 头部的值

说明：

​ 1.navigator.appCodeName：IE/Firefox/Chrome 系列浏览器中，它的值都是 "Mozilla"。

​ 2.navigator.appName：IE/Firefox/Chrome 系列浏览器中 均为 Netscape。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <iframe src=""></iframe>
    <iframe src=""></iframe>
    <iframe src=""></iframe>

    <script>
        console.log("appCodeName:" + navigator.appCodeName); // 都是Mozilla
        console.log("appName:" + navigator.appName) // 都是Netscape
        console.log("appVersion:" + navigator.appVersion);
        console.log("cookieEnabled:" + navigator.cookieEnabled);
        console.log("platform:" + navigator.platform)
        console.log("userAgent:" + navigator.userAgent)

    </script>
</body>

</html>

七、Frames对象

frames 属性返回窗口中所有命名的框架。

该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。