BOM（浏览器对象模型）

最新推荐文章于 2022-11-17 12:01:32 发布

Michelle&姐姐

最新推荐文章于 2022-11-17 12:01:32 发布

阅读量501

点赞数

分类专栏：前端开发文章标签： firefox safari 前端

本文链接：https://blog.csdn.net/weixin_62859027/article/details/125488035

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

浏览器对象模型

一.BOM概述
二.window对象

一.BOM概述

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

二.window对象

window对象是浏览器的顶级对象，表示浏览器的一个实例，DOM的document对象也是window对象的一个属性，所有浏览器都支持window对象，它代表浏览器的窗口。

1.全局作用域

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

window.document.getElementById("header");
等同于
document.getElementById("header");

2.常用成员

常用属性

属性	说明
status	状态栏所显示的内容
innerheight	窗口大小：工作区高度（不包含滚动条和工具栏）
innerwidth	窗口大小：工作区宽度（不包含滚动条和工具栏）
outerheight	包含滚动条和工具栏的完整高度
outerwidth	包含滚动条和工具栏的完整宽度
screenLeft 、screenTop	窗口位置：左上角在屏幕上的X坐标和Y坐标（IE Safari Opera 支持）
screenX 、screenY	窗口位置：左上角在屏幕上的X坐标和Y坐标（Firefox和Safari支持）
pageXOffset、pageYOffset	页面向杜宇窗口显示区左上角的x坐标和y坐标

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight; 
</script>

screen对象

screen.width 屏幕宽度
screen.height 屏幕高度
screen.availWidth 访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。

screen.availHeight访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。

实例
screen.colorDepth显示一种颜色的比特数。
screen.pixelDepth属性返回屏幕的像素深度。

window对象的常用方法

属性	说明
open（）	打开一份新的浏览器窗口
close（）	关闭浏览器窗口
alert（）	显示警告框：包含一段信息和一个确认按钮
prompt（）	显示对话框：可以提示用户输入
confirm（）	显示对话框：包含一段消息，确认和取消按钮

<script>
let myWin=window.open();
alert("hhhhh");
prompt("请输入");

在这里插入图片描述

事件

window对象常包括onload、upload、onscroll、onresize等，分别在页面加载完成后、页面卸载完成后、页面滚动、页面大小变化触发。

onload事件可用于初始化，而且有些JavaScript代码往往需要在文档加载完成后才能够去执行，onload则可以解决这些问题

<!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>
        #box{
            width:100px;
            height:100px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <!-- <script>
        var box=document.getElementById("box");
        box.style.background="red";
    </script>//用此种方法智能将script写在后面
     -->
     <script>
        window.onload=function()
        {
            var box=document.getElementById("box");
        box.style.background="red";//这种方式就可以把script放在任意一个位置
        }
     </script>
    </body>
</html>

该方法的应用：用于实现瀑布流图片显示。

定时器

定时器常用语动画效果，浏览器提供了几种定时器属性

属性	说明
setTimeout（）	达到指定时间时，执行一次某段代码
clearTimeout（）	取消由setTimeout（）方法设置的定时器
setInterval（）	每隔一段时间，重复执行某段代码
clearInterval（）	取消由setInterval（）方法设置的定时器

通过setTimeOut（函数名，时间）的方式，到达指定时间时，调用一次函数，时间单位为毫秒

<script>
let say=setTimeout(say,3000);
function say(){
alert("hhhhh");
}
</script>

setInterval（）可以用于制作简单的轮播图

<!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>
        div{
            width:500px;
            height:400px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
    <img id="myBox" src="1.jpg" width:100%>
    <button id="ok">手动切换</button>
    </div>
    <script>
        window.onload=next;
        var box=document.getElementById("myBox");
        var ok=document.getElementById("ok");
        ok.onclick=next;
        setInterval(next,3000);
        var i=1;
        function next(){
            i++;
            box.src=i+".jpg";
            if(i==10)
            {
                i=0;
            }
        }
    </script>
</body>
</html>

在这里插入图片描述

location对象

window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.assign 加载新文档
window.location.port 端口号

history 对象

成员	功能
length	当前窗口浏览历史列表的数量
back（）	后退，相当于单击浏览器“后退按钮”
forward（）	前进，相当于按浏览器的“前进按钮”
go（）	跳转