JavaScript 浏览器对象BOM

浏览器对象 BOM

• BOM是browser Object Model的缩写，简称浏览器对象模型
• BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
• 基本的BOM体系结构图
  
• BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置、改变窗口大小、打开新窗口或关闭窗口、弹出对话框、进行导航以及获取客户的一些信息，如：浏览器品牌版本，屏幕分辨率等。但BOM最强大的功能是它提供了一个访问HTML页面的接口------document对象，以使得我们可以通过这个口接口来使用DOM的强大功能

---

window 对象

• JavaScript的所有对象都存在于一个运行环境之中，这个运行环境本身也是对象，称为“顶层对象”。这就是说，JavaScript的所有对象，都是“顶层对象”的下属。不同的运行环境有不同的“顶层对象”，在浏览器环境中，这个顶层对象就是window对象（w为小写）

• 所有浏览器环境的全局变量，都是window对象的属性

• 可以简单理解成，window就是指当前的浏览器窗口

• window可以不写

window对象属性

• window.innerWidth：返回窗口的文档显示区的宽度
• window.innerheight：返回窗口的文档显示区的高度
• window.pageXOffset：返回页面的水平滚动距离
• window.pageYOffset：返回页面的垂直滚动距离。这两个属性的单位为像素

---

window对象方法

定时器

setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法；可以不使用window前缀，直接使用函数

• setInterval(要执行的动作，时间：毫秒)：按照指定周期来调用函数或计算表达式；把函数当成字符串，就可以传参数
• setTimeout(要执行的动作，时间：毫秒)：在指定的毫秒数后调用函数或计算表达式
• clearInterval(要清理的定时器名称)：取消由setInterval()设置的Interval
• clearTimeout(要清理的定时器名称)：取消由setTimeout()方法设置的timeout

    <script>
        function func(){
            document.write("2秒后我会执行！");
        }

        var setId = setTimeout(func, 2000);
        document.write("setTimeout ID：" + setId);
        //clearTimeout(setId);


        var setId = setInterval(func, 2000);
        document.write("setInterval ID: " + setId);
        //clearInterval(setId);
    </script>

---

窗口控制

• open()：打开一个新的浏览器窗口或查找一个已命名的窗口；参数如下：
  1、URL：声明了要在新窗口中显示的文档的URL
  2、name：声明了新窗口的名称或者窗口目标
  3、 feature：声明了新窗口要显示的标准浏览器的特征
  4、窗口的属性
  （1）、width：新建窗口宽度
  （2）、height：新建窗口高度
  （3）、top：左上角垂直坐标
  （4）、left：左上角水平坐标
• close()：关闭当前浏览器窗口

 <script>
      // open("https://www.baidu.com", "window1");
      open("https://www.baidu.com", "window1", "height = 300px, width = 200px, top = 50px, left = 50px");
      // close();
  </script>

• moveTo(x, y)：将窗口移动到绝对坐标(x, y)
• moveBy(x, y)：将窗口移动到相对坐标(x, y)
• resizeTo(w, h)：将窗口调整到绝对的大小
• resizeBy(w, h)：将窗口调整到相对的大小

---

弹窗

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

• alert()：显示带有一段消息和一个确认按钮的警告框
• confirm()：显示可提供用户输入的对话框。返回值为布尔值
• prompt()：显示带有一段消息以及确认按钮和取消按钮的对话框
  （1）、第一个参数是提示，第二个参数是默认值
  （2）、返回值为输入的值，取消返回null

<script>
  window.alert("警告框, window可以不添加！");

  var rep = confirm("按确定返回true, 按取消返回false！");
  document.write(rep);

  var rep = prompt("第一个参数是提示", "第二个参数是默认值！");
  document.write(rep);
</script>

---

Navigator 对象

Window对象的Navigator属性，指向一个包含浏览器相关信息的对象

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

• navigator.appCodeName：返回浏览器的代码名
• navigator.appName：返回浏览器的名称
• navigator.appVersion：返回浏览器的平台和版本信息
• navigator.cookieEnabled：返回指明浏览器中是否启用cookie的布尔值
• navigator.userAgent：返回由浏览器发送服务器的user-agent头部的值
• navigator.onLine：返回指定系统是否处于脱机模式的布尔值

---

Screen 对象

screen对象包含了显示设备的信息

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

• screen.availHeight：返回客户端屏幕的高度（除Windows任务栏之外）
• screen.availWidth：返回客户端屏幕的宽度（除Windows任务栏之外）
• screen.height：返回客户端屏幕的高度（包括Windows任务栏）
• screen.width：返回客户端屏幕的高度（包括Windows任务栏）

---

History 对象

浏览器窗口有一个history对象，用来保存浏览历史

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

history对象有back和forward两个方法，它可以跳转到当前的上一页和下一页，可以用length属性查看客户端浏览器的历史列表中访问的网页个数

• back()：加载history列表中的前一个URL
• forward()：加载history列表中的下一个URL
• go()：加载history列表中的某个具体页面

---

Location 对象

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

这种方法既可以用于具有onclick事件的标签，也可以用于满足某些条件进行跳转，特点是方便且灵活

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

Location对象属性

• href：跳转或返回完整的URL
• host：设置或返回主机名和当前URL的端口号
• hash：设置或返回#号开始的URL（锚）
• hostname：设置或返回当前URL的主机名
• pathname：设置或返回当前URL的路径部分
• port：设置或返回当前URL的端口号
• protocol：设置或返回当前URL的协议
• search：设置或返回从问好（？）开始的URL（查询部分）

---

Location对象方法

• assign()：加载新的文档

• reload()：重新加载当前文档
  1、如果该方法没有规定参数，或者参数是false，它就会用HTTP头If-Modified-Since来检测服务器上的文档是否已改变。如果文档已改变，reload会再次下载该文档。如果文档未改变，则该方法将缓存中装载文档。这与客户点击浏览器的刷新按钮的效果是完全一样的
  2、如果把该方法的参数设置为true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住Shift键的效果是完全一样

• replace()：用新的文档替换当前文档
  1、该该方法不会再history对象中生成一个新的记录。当使用该方法时，新的URL将覆盖history对象的当前记录