ECMAScript5P11（BOM浏览器对象模型）

最新推荐文章于 2024-07-18 10:24:18 发布

今天你四百冷了吗

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量275

点赞数

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_48931100/article/details/126682751

版权

BOM是什么？

浏览器对象模型：BOM使我们可以通过js来操作浏览器；

window对象

BOM 的核心是 window 对象代表整个浏览器的窗口，同时是网页中的全局对象；window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义全局方法。

Global作用域

因为 window 对象被复用为 ECMAScript 的 Global 对象，所以通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法。

<script>
  var name = 'zhangsan';
  var sayName = function () {
    console.log(this.name);
  }
  console.log(window.name); //zhangsan
  sayName();  //zhangsan
  window.sayName(); //zhangsan
</script>

这里，变量 name 和函数 sayName()被定义在全局作用域中，它们自动成为了 window 对象的成员。因此，变量 name 可以通过 window.name 来访问，而函数 sayName()也可以通过 window.sayName()来访问。因为 sayName()存在于全局作用域，this.name 映射到 window.name，所以就可以显示正确的结果了。

Window窗口

窗口位置

screenLeft和screenTop

属性返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)

screenX和screenY

属性返回窗口相对于屏幕的X和Y坐标。(ie浏览器不支持，火狐可以使用此属性)

pageXOffset

设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset

设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

注意：IE8及更早IE版本不支持该属性,但可以使用 “document.body.scrollLeft” 和 “document.body.scrollTop” 属性。

窗口大小

innerWidth

页面视图区的宽度

innerHeight

页面视图区的高度

outerWidth

浏览器窗口的宽度

outerHeight

浏览器窗口的高度

注意：所有主流浏览器都支持innerWidth,innerHeight,outerWidth,outerHeight 属性。注意：IE8及更早IE版本不支持这些属性。

screen对象

屏幕总宽度/高度(像素单位):

screen.width

screen.height

可用宽度/高度(像素单位):

screen.availWidth

screen.availHeight

颜色深度:

screen.colorDepth

颜色分辨率:

screen.pixelDepth

Window open()

window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口。这个方法接收 4个参数：要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。通常，调用这个方法时只传前 3 个参数，最后一个参数只有在不打开新窗口时才会使用。

语法

window.open(URL,name,specs,replace)

参数

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

name

可选。指定target属性或窗口的名称。支持以下值：

_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
name - 窗口名称
specs

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

hannelmode=yes\|no\|1\|0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes\|no\|1\|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes\|no\|1\|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels	窗口的高度。最小.值为100
left=pixels	该窗口的左侧位置
location=yes\|no\|1\|0	是否显示地址字段.默认值是yes
menubar=yes\|no\|1\|0	是否显示菜单栏.默认值是yes
resizable=yes\|no\|1\|0	是否可调整窗口大小.默认值是yes
scrollbars=yes\|no\|1\|0	是否显示滚动条.默认值是yes
status=yes\|no\|1\|0	是否要添加一个状态栏.默认值是yes
titlebar=yes\|no\|1\|0	是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes\|no\|1\|0	是否显示浏览器工具栏.默认值是yes
top=pixels	窗口顶部的位置.仅限IE浏览器
width=pixels	窗口的宽度.最小.值为100

replace

Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。

<button onclick="openWindow()">打开新窗口</button>
<button onclick="closeWindow()">关闭窗口</button>
<script>
  function openWindow() {
    // 设置一个全局变量接收新窗口的打开
    w = window.open('https://www.baidu.com', '_blank', 'width=600,height=600', 'false');
    // 调整窗口大小 浏览器窗口的新高度和新宽度
    w.resizeTo(400,400);
    // 移动窗体 接受的是新位置的x和y坐标值
    w.moveTo(100, 100);
  }
  function closeWindow() {
    // 关闭窗口
    w.close()
  }
</script>

系统对话框

使用 alert()、confirm()和 prompt()方法，可以让浏览器调用系统对话框向用户显示消息。这些对话框与浏览器中显示的网页无关，而且也不包含 HTML。它们的外观由操作系统或者浏览器决定，无法使用 CSS 设置。此外，这些对话框都是同步的模态对话框，即在它们显示的时候，代码会停止执行，在它们消失以后，代码才会恢复执行。

alert()

alert()接收一个要显示给用户的字符串。与 console.log 可以接收任意数量的参数且能一次性打印这些参数不同，alert()只接收一个参数。调用 alert()时，传入的字符串会显示在一个系统对话框中。对话框只有一个“OK”（确定）按钮。如果传给 alert()的参数不是一个原始字符串，则会调用这个值的 toString()方法将其转换为字符串。

警告框（alert）通常用于向用户显示一些他们无法控制的消息，比如报错。用户唯一的选择就是在看到警告框之后把它关闭。

alert('我是警告框')

confirm()

确认框通过调用 confirm()来显示。确认框跟警告框类似，都会向用户显示消息。但不同之处在于，确认框有两个按钮：“Cancel”（取消）和“OK”（确定）。用户通过单击不同的按钮表明希望接下来执行什么操作。比如，confirm(“你确定吗?”)；

要知道用户单击了 OK 按钮还是 Cancel 按钮，可以判断 confirm()方法的返回值：true 表示单击了 OK 按钮，false 表示单击了 Cancel 按钮或者通过单击某一角上的 X 图标关闭了确认框。确认框的典型用法如下所示：

<script>
  var result = confirm('你确定吗?');
  if (result) {
    console.log('确定');
  }else{
    console.log('取消');
  }
</script>

prompt()

提示框，通过调用 prompt()方法来显示。提示框的用途是提示用户输入消息。除了 OK 和 Cancel 按钮，提示框还会显示一个文本框，让用户输入内容。prompt()方法接收两个参数：要显示给用户的文本，以及文本框的默认值（可以是空字符串）。调用 prompt(“你叫什么名字?”)，如果用户单击了 OK 按钮，则 prompt()会返回文本框中的值。如果用户单击了 Cancel 按钮，或者对话框被关闭，则 prompt()会返回 null。

<script>
  var result = prompt("你叫什么名字?");
  if (result) {
    console.log(result);
  }else{
    console.log('取消');
  }
</script>

Location

代表当前浏览器的地址栏信息，通过该对象可以获取地址栏信息，或者操作浏览器跳转页面；
如果直接将location属性修改为一个完整的路径或者相对路径页面会自动跳转；

<script>
  console.log(window.location === document.location); //true
  console.log(location === document.location);	//true
  console.log(location === window.location);	//true
</script>

属性

host 返回服务器名称和端口号
hostname 返回不带端口号的服务器名称
href 返回当前加载页面的完整URL
pathname 返回URL的目录和文件名
port 返回URL中指定的端口号
protocol 返回页面使用的协议
search 返回URL的查询字符串。这个字符串以问号开头

方法

assign()

传递一个url参数，打开新url，并在浏览记录中生成一条记录。

replace()

参数为一个url，结果会导致浏览器位置改变，但不会在历史记录中生成新记录。

reload()

重新加载当前显示的页面，参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true，强制从服务器中重新加载。

<button>跳转页面</button>
<button>替换页面</button>
<button>刷新页面</button>
<script>
  var btn = document.getElementsByTagName('button');
  btn[0].onclick = function () {
    location.assign('./test2.html')
  }
  btn[1].onclick = function () {
    location.replace('./test2.html')
  }
  btn[2].onclick = function () {
    location.reload()
  }
</script>

History

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

length

返回历史列表中的网址数
注意：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。

back()

加载 history 列表中的前一个 URL

forward()

加载 history 列表中的下一个 URL

go()

加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。

间歇调用和超时调用

setTimeout()

可以将一个函数，隔一段时间后再执行；（只会执行一次）

该方法返回一个数值ID，表示超时调用，这个超时调用ID是计划执行代码的唯一标识符通过它来取消超时调用。可以通过clearTimeout(ID);

参数：

1.要执行的代码（回调函数）
2.以毫秒表示的时间。

例如在1秒后执行输出语句

<script>
  var id = setTimeout(() => {
    console.log('Hello World');
  }, 1000);
  console.log(id);
  // 清除超时调用
  clearTimeout(id);
</script>

setInterval()

可以将一个函数每隔一段时间执行一次；（如果不停止会一直执行）

按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID，该ID可以用户在将来某个时刻取消间歇调用。

参数：

1.要执行的代码
2.以毫秒表示的时间。

如动态显示时间

<script>
  var div = document.createElement('div');
  // 间歇调用
  var id = setInterval(() => {
    div.innerHTML = new Date().toLocaleString();
  }, 1000);
  document.body.appendChild(div);
  // 清除计时器
  clearInterval(id);
</script>

防抖和节流

解决前端在UI界面高频的操作带来的函数多次调用的问题

在进行窗口的操作或者输入框操作时，如果事件处理函数用的频率无限制，会加重浏览器和服务器的负担，此时我们就可以用防抖（debounce）和节流（throttle）的方式来减少调用频率，同时又不影响实际效果。

函数防抖

函数在一段时间之后才执行；如果在这一段时间(300ms)内用户频繁触发事件(onmousemove)则时间重新计算，直到时间超过规定时间(>xxxms)，才执行函数

生活中的小例子：公交车在车站停车等人上车时，不断有人上车，直到人都上完了，才会关上车门；

防抖的实现：
1.声明一个全部变量存储定时器ID。
2.每一次触发交互的时候，先清除上一次的定时器，然后开启本次定时器。

<body>
  <input type="text">
  <button>提交</button>
  <script>
    let btn = document.getElementsByTagName('button')[0]
    let input = document.getElementsByTagName('input')[0]
    function handler () {
      console.log(input.value)
      console.log(this)
      console.log(arguments)
    }
    function debounce (fun, timer, callNow) {
      //高阶函数
      let timeout = null
      return function () {
        if (timeout) {
          clearTimeout(timeout)
        }
        if (callNow) {
          let flag = !timeout
          if (flag) {
            handler.call(this, arguments)
          }
          timeout = setTimeout(() => {
            timeout = null
          }, timer)
        } else {
          timeout = setTimeout(() => {
            handler.call(this, arguments)
          }, timer)
        }

      }
    }
    btn.addEventListener('click', debounce(handler, 250, true))
    //简写:默认第一次直接执行函数
    // function debounce (fun, timer) {
    //   //高阶函数
    //   let timeout = null
    //   return function () {
    //     let flag = !timeout
    //     if (timeout) {
    //       clearTimeout(timeout)
    //     }
    //     if (flag) { handler.call(this, arguments) }
    //     timeout = setTimeout(() => {
    //       timeout = null
    //     }, timer)
    //   }
    // }
  </script>
</body>

函数节流

单位时间内，频繁触发一个事件，只会触发一次。
节流的实现：
1.声明一个全局变量存储触发事件。
2.每一次触发事件，获取当前时间。
3.判断当前时间与上一次触发事件，是否超过了间隔。
4.如果超过间隔时间，则执行事件处理代码，然后存储本次触发的时间。

<button id="btn">点我呀</button>
<script>
  //声明一个全局变量存储触发时间
  let lastTime = null
  // 获取按钮节点
  var btn = document.getElementById('btn')
  //页面滚动事件
  btn.onclick = function () {
    //1.每一次触发 先获取本次时间戳
    let currentTime = Date.now()
    //2.判断当前时间 与 上次触发时间 是否超过间隔
    if (currentTime - lastTime >= 3000) {
      console.log(this.innerHTML)
      //3.存储本次的触发时间
      lastTime = currentTime
    }
  }
</script>