BOM对象

最新推荐文章于 2024-04-26 16:47:03 发布

卖火柴的小男孩2

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.8k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_42839746/article/details/126805009

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、BOM对象

BOM：Brower Object Model，指的是浏览器对象模型。

作用：操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。

浏览器对象：浏览器提供的一系列内置对象的统称。

BOM浏览器对象模型：各内置对象之间按照某种层次组织起来的模型的统称。

window对象是BOM的顶层（核心）对象。

其他的对象都是以属性的方式添加到window对象下，也可称为window的子对象。

1、document（文档对象）：也称为DOM对象，是HTML页面当前窗体的内容，同时也是JavaScript重要组成部分之一。

2、history（历史对象）：主要用于记录浏览器的访问历史记录，也就是浏览网页的前进与后退功能。

3、location（地址栏对象）：用于获取当前浏览器中URL地址栏内的相关数据。

4、navigator（浏览器对象）：用于获取浏览器的相关数据，例如浏览器的名称、版本等，也称为浏览器的嗅探器。

5、screen（屏幕对象）：可获取与屏幕相关的数据，例如屏幕的分辨率等。

二、window对象

1、全局作用域

window对象：是BOM中所有对象的核心，同时也是BOM中所有对象的父对象。

定义在全局作用域中的变量、函数以及JavaScript中的内置函数都可以被window对象调用。

2、弹出对话框和窗口

window对象中除了前面提过的alert()和prompt()方法外，还提供了很多弹出对话框和窗口的方法，以及相关的操作属性。

方法

分类	名称	说明
属性	closed	返回一个布尔值，该值声明了窗口是否已经关闭
	name	设置或返回存放窗口名称的一个字符串
	opener	返回对创建该窗口的window对象的引用
	parent	返回当前窗口的父窗口
	self	对当前窗口的引用，等价于window属性
	top	返回最顶层的父窗口
方法	alert()	显示带有一段消息和一个确认按钮的警告框
	confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
	prompt()	显示可提示用户输入的对话框
	open()	打开一个新的浏览器窗口或查找一个已命名的窗口
	close()	关闭浏览器窗口
	focus()	把键盘焦点给予一个窗口
	print()	打印当前窗口的内容
	scrollBy()	按照指定的像素值来滚动内容
	scrollTo()	把内容滚动到指定的坐标

所有的属性和方法在常见的浏览器（如Edge、Chrome等）中全部支持。

1、prompt()方法

作用：弹出对话框和窗口，用于生成用户输入的对话框。

    prompt('请输入测试的选项'); // 用于设置用户输入的提示信息

    prompt('请输入测试的选项', '用户名和密码');   // 用于设置输入框中的默认信息

2、confirm()方法

作用：弹出一个确认对话框，该对话框中包含提示消息以及确认和取消按钮。

参数：用于设置确认的提示信息。

返回值：点击“确定”按钮，返回true。点击“取消”按钮，返回false。

    confirm("确定要删除吗？")

3、open()方法

作用：用于打开一个新的浏览器窗口，或查找一个已命名的窗口。

语法：open(URL, name, specs, replace)。

参数（URL）：打开指定页面的URL地址，若没有指定，则打开一个新的空白窗口。

参数（name）：指定target属性或窗口的名称。

参数（specs）：用于设置浏览器窗口的特征（如大小、位置、滚动条等），多个特征之间使用逗号分隔。

参数（replace）：设置为true，表示替换浏览历史中的当前条目，设置false（默认值），表示在浏览历史中创建新的条目。

name可选值	含义
_blank	URL加载到一个新的窗口，也是默认值
_parent	URL加载到父框架
_self	URL替换当前页面
_top	URL替换任何可加载的框架集
name	窗口名称

specs可选参数	值	说明
height	Number	窗口的高度，最小值为100
left	Number	该窗口的左侧位置
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
width	Number	窗口的宽度，最小值为100

4、close()方法

作用：与open()方法功能相反的是close()方法，用于关闭浏览器窗口，调用该方法的对象就是需要关闭的窗口对象。

4、窗口位置和大小

BOM中用来获取或更改window窗口位置，窗口高度与宽度，文档区域高度与宽度的相关属性和方法有很多。

分类	名称	说明
属性	screenLeft	返回相对于屏幕窗口的x坐标（Firefox不支持）
	screenTop	返回相对于屏幕窗口的y坐标（Firefox不支持）
	screenX	返回相对于屏幕窗口的x坐标（IE8不支持）
	screenY	返回相对于屏幕窗口的y坐标（IE8不支持）
	innerHeight	返回窗口的文档显示区的高度（IE8不支持）
	innerWidth	返回窗口的文档显示区的宽度（IE8不支持）
	outerHeight	返回窗口的外部高度，包含工具条与滚动条（IE8不支持）
	outerWidth	返回窗口的外部宽度，包含工具条与滚动条（IE8不支持）

分类	名称	说明
方法	moveBy()	将窗口移动到相对的位置
	moveTo()	将窗口移动到指定的位置
	resizeBy()	将窗口大小调整到相对的宽度和高度
	resizeTo()	将窗口大小调整到指定的宽度和高度

目前只有window.open()方法打开的的窗口和选项卡（Tab），FireFox和Chrome浏览器才支持口位置和大小的调整。

5、框架操作

window对象提供的frames属性可通过集合的方式，获取HTML页面中所有的框架，length属性就可以获取当前窗口中frames的数量。

<body>

    <!-- 设置框架 -->

    <iframe name="frame01"></iframe>

    <iframe name="frame02"></iframe>

    <iframe name="frame03"></iframe>

</body>



<script>

    // 获取窗口对应给定对象的内容

    // 方式1：

    window.frames['frame01'].document.write('frame01 qwq');

    // 方式2：

    window.frames.frame02.document.write('frame02 owo');

    // 方式3：

    window.frames[2].document.write('frame03 pwp');

</script>

除此之外，还可以利用parent获取当前window对象所在的父窗口。

    window.parent;  // 如果在框架中，获取父级窗口，否则返回自身引用

    window.parent.frames;       // 获取同级别的框架

6、定时器

JavaScript中可通过window对象提供的方法实现在指定时间后执行特定操作，也可以让程序代码每隔一段时间执行一次，实现间歇操作。

方法	说明
setTimeout()	在指定的毫秒数后调用函数或执行一段代码
setInterval()	按照指定的周期（以毫秒计）来调用函数或执行一段代码
clearTimeout()	取消由setTimeout()方法设置的定时器
clearInterval()	取消由setInterval()设置的定时器

setTimeout()和setInterval()方法区别：

相同点：都可以在一个固定时间段内执行JavaScript程序代码。

不同点：setTimeout()只执行一次代码，setInterval()会在指定的时间后，自动重复执行代码。

    setTimeout(qwq, 3000);

    function qwq() {

        console.log('我只执行一次');

    }

setTimeout()运行效果图

    setInterval(pwp, 3000);

    function pwp() {

        console.log('我每隔3秒执行一次');

    }

setInterval运行效果图

（1）setTimeout()方法在执行一次后即停止了操作；setInterval()方法一旦开始执行，在不加干涉的情况下，间歇调用将会一直执行到页面关闭为止。

（2）若要在定时器启动后，取消该操作，可以将setTimeout()的返回值（定时器ID）传递给clearTimeout()方法；或将setInterval()的返回值传递给clearInterval()方法。

（3）案例：关闭弹窗广告

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>广告</title>

        <style type="text/css">

            #ad{

                width:300px;

                height: 220px;

                background-size: 100%;

                background-image:url(https://z4a.net/images/2022/07/21/_.jpg);

                position: fixed;

                bottom:0px;

                right: 0px;

                display: none;

            }

        </style>

        <script type="text/javascript">

           

            function init(){

                setTimeout(showAd,5000) // 两秒后执行showAd()函数

            }

           

            function showAd(){  // 弹出弹窗广告

                var ad = document.getElementById("ad");

                ad.style.display ="block";

            }



            function closeAd(){     // 手动关闭弹窗广告

                var ad = document.getElementById("ad");

                ad.style.display ="none";

            }

           

        </script>

       

    </head>

   

    <body onload="init()">

            <div id="ad">

                <button onclick="closeAd()">关闭</button>

            </div>

    </body>

</html>

三、location对象

1、更改URL

URL：Uniform Resource Locator，统一资源定位符。

在Internet上访问的每一个网页文件，都有一个访问标记符，用于唯一标识它的访问位置，以便浏览器可以访问到，这个访问标记符称为URL。

由于80是Web服务器的默认端口号，因此可以省略URL中的“:80”

即：http://www.example.com/web/index.html?a=3&b=4#res

location对象提供的用于改变URL地址的方法，所有主流的浏览器都支持。

名称	说明
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

reload()方法的唯一参数，是一个布尔类型值，将其设置为true时，它会绕过缓存，从服务器上重新下载该文档，类似于浏览器中的刷新页面按钮。

2、获取URL参数

Web开发中，经常通过URL地址传递的参数执行指定的操作，如商品的搜索，排序等。此时，可以利用location对象提供的search属性返回URL地址中的参数。

获取URL的指定部分：location.属性名。

设置URL的指定部分：location.属性名 = 值。

属性	说明	属性	说明
hash	返回一个URL的锚部分	pathname	返回URL的路径名
host	返回一个URL的主机名和端口	port	返回一个URL服务器使用的端口号
hostname	返回URL的主机名	protocol	返回一个URL协议
href	返回完整的URL

3、定时跳转

思路：

（1）编写定时跳转的HTML页面。

（2）获取指定的秒数，并减1写入页面。

（3）当秒数大于0时，利用setTimeout()循环倒计时。

（4）当秒数小于等于0时，利用location.href跳转到指定的URL地址中。

<!-- index.html文件 -->



<!DOCTYPE html>

<html>

<head>

    <title>location</title>

    <style type="text/css">

        div{

            height: 50px;

            width: 300px;

            margin:250px auto;

            background-color: #44ff66;

            text-align: center;

            padding: 10px 20px;

        }

        div p{

            line-height: 1.42;

            font-size: 16px;

        }

        div span{

            color: red

        }

    </style>

</head>

<body>

  <div><p id="p"></p></div>

</body>

<script type="text/javascript">



    var p=document.getElementById('p')

    var t=5

    //功能：倒计时5秒，5秒到了就跳转

    function show(){

        if(t==0){

            //跳转首页

          window.location.href='main.html'

        }else{

             p.innerHTML="请稍等下，你将在<span>"+t+"</span>秒后跳转到首页"

             t--

        }

    }

    show()

    setInterval('show()',1000) // 每隔一秒就执行shou()函数，直到t=0时，才跳转到其他页面，从而关闭index.html页面，停止执行show()函数

</script>

</html>

<!-- main.html文件 -->

<!DOCTYPE html>

<html>



<head lang="en">

    <meta charset="UTF-8">

    <title>主页面</title>

    <style type="text/css">

        body {

            margin: 0px auto;

            text-align: center;

        }

    </style>

</head>



<body>

    <img src="https://z4a.net/images/2022/07/21/_.jpg" alt="鲜花" /><br />

</body>



</html>

四、history对象

1、历史记录跳转

history对象可对用户在浏览器中访问过的URL历史记录进行操作。

出于安全方面的考虑，history对象不能直接获取用户浏览过的URL，但可以控制浏览器实现“后退”和“前进”的功能。

分类	名称	说明
属性	length	返回历史列表中的网址数
方法	back()	加载history列表中的前一个URL
	forward()	加载history列表中的下一个URL
	go()	加载history列表中的某个具体页面

go()方法可根据参数的不同设置，完成历史记录的任意跳转。当参数值是一个负整数时，表示“后退”指定的页数；当参数值是一个正整数时，表示“前进”指定的页数。

当go()方法的参数为1或-1时，与forward()和back()方法的作用相同。

2、无刷新更改URL地址

HTML5为history对象引入了history.pushState()和history.replaceState()方法，用来在浏览历史中添加和修改记录，实现无刷新更改URL地址。

    pushState(state, title[, url])  // 添加历史记录

    replaceState(state, title[, url])   // 修改历史记录

参数state：表示一个与指定网址相关的状态对象，此处可以填null或空字符串。

参数title：表示新页面的标题，可以填null或空字符串。

参数url：表示新的网址，并且必须与当前页面处在同一个域中。

pushState()方法会改变浏览器的历史列表中记录的数量。

replaceState()方法仅用于修改历史记录，历史记录列表的数量不变，与location.replace()方法的功能类似。

3、案例

<!-- index.html文件 -->

<!DOCTYPE html>

<html>



<head lang="en">

    <meta charset="UTF-8">

    <title>主页面</title>

    <style type="text/css">

        body {

            margin: 0px auto;

            text-align: center;

        }

    </style>

</head>



<body>

    <a href="flower.html">查看详情</a> <a href="">刷新页面</a>

</body>



</html>

<!-- flower.html文件 -->

<!DOCTYPE html>

<html>



<head lang="en">

    <meta charset="UTF-8">

    <title>详情页面</title>

    <style type="text/css">

        body {

            font-size: 12px;

            line-height: 20px;

            margin: 0px 10px;

        }



        p {

            font-size: 14px;

            font-weight: bold;

        }



        img {

            width: 600px;

            height: 600px;

        }

    </style>

</head>



<body>

    <img src="https://z4a.net/images/2022/07/21/_.jpg" />

    <p><a href="javascript:window.history.go(-1)">返回主页面</a></p>

    <p>我是详情页</p>

</body>



</html>

五、navigator对象

1、navigator对象提供了有关浏览器的信息，主流浏览器中存在的属性和方法如下。

分类	名称	说明
属性	appCodeName	返回浏览器的内部名称
	appName	返回浏览器的名称
	appVersion	返回浏览器的平台和版本信息
	cookieEnabled	返回指明浏览器中是否启用cookie的布尔值
	platform	返回运行浏览器的操作系统平台
	userAgent	返回由客户端发送服务器的User-Agent头部的值
方法	javaEnabled()	指定是否在浏览器中启用Java

2、案例

<!DOCTYPE html>

<html>

<head>

    <title>浏览器信息</title><meta charset="utf-8">

</head>

<body>



<script type="text/javascript">

    console.log('浏览器代码名称：' + window.navigator.appCodeName)

    console.log('浏览器名称：'+window.navigator.appName)

    console.log('浏览器版本：' + window.navigator.appVersion)

    console.log('启用Cookies：' +window.navigator.cookieEnabled)

    console.log('操作平台：' + window.navigator.platform)

    console.log('由客户机发送服务器的 user-agent 头部信息：' + window.navigator.userAgent)

    //功能：判断浏览器类型

    function userBrowser(){

        var useragent = window.navigator.userAgent    //useragent字符串对象

        //判断IE浏览器 window.ActiveXObject

        if(!!window.ActiveXObject || 'ActiveXObject' in window){

            console.log('浏览器类型IE')

        }else if (useragent.indexOf('Firefox')>-1){

            console.log('浏览器类型火狐')

        }else if (useragent.indexOf('Chrome')>-1){

            console.log('浏览器类型谷歌')

        }else if (useragent.indexOf('Safari')>-1){

            console.log('浏览器类型Safari')

        }else if (useragent.indexOf('Opera')>-1){

            console.log('浏览器类型Opera')

        }else{

            console.log("浏览器类型未知")

        }

    }

    userBrowser()

</script>



</body>

</html>

六、screen对象

1、screen对象用于返回当前渲染窗口中与屏幕相关的属性信息，如屏幕的宽度和高度等。以下展示主流浏览器中支持的screen属性。

名称	说明
height	返回整个屏幕的高
width	返回整个屏幕的宽
availHeight	返回浏览器窗口在屏幕上可占用的垂直空间
availWidth	返回浏览器窗口在屏幕上可占用的水平空间
colorDepth	返回屏幕的颜色深度
pixelDepth	返回屏幕的位深度/色彩深度

2、案例

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <title>刮刮乐</title>



    <style>

        * {

            margin: 0;

            padding: 0;

        }



        img {

            width: 600px;

            height: 649px;

            position: absolute;

            /*对图片进行绝对定位*/

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

        }



        canvas {

            position: absolute;

            z-index: 1;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

        }

    </style>



</head>



<body>

    <img src="https://z4a.net/images/2022/07/21/_.jpg">

    <!--画布  -->

    <canvas id="canvas" width="600" height="649"></canvas>



    <script>

        // 定义变量canvas通过获取id“canvas”

        var canvas = document.getElementById('canvas')

        // 定义画笔的变量

        var context = canvas.getContext('2d')

        // 为照片加上蒙版

        context.beginPath()

        context.fillStyle = 'grey'

        context.fillRect(0, 0, 600, 649)

        // 鼠标按下添加函数

        canvas.onmousedown = function () {

            // 鼠标移动添加函数

            canvas.onmousemove = function () {

                var x = event.clientX - (screen.availWidth - canvas.width) / 2

                var y = event.clientY - (screen.availHeight - canvas.height) / 2

                console.log(x + "," + y)

                context.globalCompositeOperation = "destination-out"

                context.beginPath()

                context.arc(x, y, 80, 0, Math.PI * 2);

                context.fill()

            }

        }

        // 鼠标抬起不刮开

        canvas.onmouseup = function () {

            canvas.onmousemove = function () { }

        }



    </script>



</body>



</html>

卖火柴的小男孩2

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
BOM对象

BOM：Brower Object Model，指的是浏览器对象模型。作用：操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。浏览器对象：浏览器提供的一系列内置对象的统称。BOM浏览器对象模型：各内置对象之间按照某种层次组织起来的模型的统称。window对象是BOM的顶层（核心）对象，其他的对象都是以属性的方式添加到window对象下，也可称为window的子对象。
复制链接

扫一扫