BOM（浏览器对象模型）

最新推荐文章于 2024-03-23 19:51:27 发布

MeiYiii0616

最新推荐文章于 2024-03-23 19:51:27 发布

阅读量266

点赞数

分类专栏： Web网页开发文章标签：大数据

本文链接：https://blog.csdn.net/m0_64694920/article/details/125497402

版权

Web网页开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一前言

BOM（浏览器对象模型）用于操作浏览器，例如弹出窗口，刷新页面，后退，前进等。BOM提供的常用对象包括window对象，screen对象，location对象,navigator对象等。由于BOM由各个浏览器推出，所以没有统一标准，不同浏览器支持的对象成员也略有差别。

二window对象

window是浏览器的顶级对象，表示浏览器的一个实例，DOM的document对象也是window对象的属性。

1.全局作用域

全局作用域中的变量和函数也都属于window对象的成员，当引用window对象的成员时，可以省略window。

2.常用成员

属性

方法

事件

页面加载事件

　方式1：window.onload = function(){ }

　window.addEventListener('load',function(){ })

　window.onload 是窗口（页面）加载事件，当文档内容完全加载成功，就会触发该事件（包括图像，脚本文件，CSS文件等），就调用的处理函数。

　注意：

　　1.有了 window.pnload 就可以把JS代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。

　　2.window .onload 传统注册事件方式只能写一次，如果有多个，会议最后一个 window.onload 为准。

　　3.如果使用 addEventListener 则没有限制

　方式2：document.addEventListener('DOMContentLoaded',function(){ })

　DOMContentLoaded 事件触发时，仅当 DOM 加载完成，不包括样式表，图片，flash等等。IE9以上才支持

　　注意：

　　　如果页面的图片很多的话，从用户访问到 onload 触发可能需要较长的时间，交互效果就不能实现，必然影响用户体验，此时用DOMContentLoaded 时间比较合适。

调整窗口大小事件

　window.onresize = function(){ }

　window.addEventLisener('load',function(){});

　window.onload 是调整窗口大小加载事件，当触发时就调用是处理函数

　注意：

　1.只要窗口大小发生像素变化就会触发这个事件。

　2.经常利用这个事件完成响应式布局，window.innerWidth 当前屏幕宽度。innerHeight 当前屏幕高度。

例：实现瀑布流布局

在实现时主要在onload和onscroll两个事件中调用waterfall()函数进行图片布局。瀑布流布局时，需要：

根据页面宽度和图片所在box宽度，计算每行包含几张照片，即列数。
将所有列高度保存在hArr[]数组中，调用minArr()函数求得当前数组最小值和其下标，即最短的一列。
创建box和img等元素，将下一幅图片添加到最短一列的下方。图片位置通过设置left和top完成，left由所在列和box宽度，box间隙gap决定，top由列高和gap决定。

三定时器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      div {
        width: 500px;
        height: 400px;
        margin: 0 auto;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>
      <img id="imgBox" src="小图标/1.webp" width="100%" />
      <button id="btnNext">手动切换</button>
    </div>
    <script>
      window.onload = nextImg;
      let imgBox = document.getElementById("imgBox");
      let btnNext = document.getElementById("btnNext");
      btnNext.onclick = nextImg;
      setInterval(nextImg, 3000);
      let i = 0;
      function nextImg() {
        i++;
        imgBox.src = "小图标/" + i + ".webp";
        if (i == 3) {
          i == 1;
        }
      }
    </script>
  </body>
</html>

效果为：

四其他对象

screen对象
location对象
navigator对象
history对象

MeiYiii0616

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM（浏览器对象模型）

目录一前言二window对象1.全局作用域2.常用成员三定时器四其他对象 BOM（浏览器对象模型）用于操作浏览器，例如弹出窗口，刷新页面，后退，前进等。BOM提供的常用对象包括window对象，screen对象，location对象,navigator对象等。由于BOM由各个浏览器推出，所以没有统一标准，不同浏览器支持的对象成员也略有差别。window是浏览器的顶级对象，表示浏览器的一个实例，DOM的document对象也是window对象的属性。全局作用域中的变量和函数也都属于window对
复制链接

扫一扫