BOM（浏览器对象模型）

最新推荐文章于 2024-09-01 13:33:34 发布

lollipop94

最新推荐文章于 2024-09-01 13:33:34 发布

阅读量247

点赞数

分类专栏： JavaScript 文章标签： javascript BOM

本文链接：https://blog.csdn.net/lollipop94/article/details/76188116

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、window对象——BOM的核心对象

通过JavaScript访问浏览器窗口的一个接口。
所有浏览器都支持window对象。它表示浏览器窗口。
ECMAScript规定的Global对象。

1、全局作用域

全局变量是window对象的属性，全局函数是window对象的方法。
全局变量不能通过delete操作符删除，但是直接在window对象上的定义的属性可以。
尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。

2、窗口关系及框架

如果页面包含框架，则每个框架都拥有自己的window对象，并保存在frames集合中。
每个window对象都有一个name属性，其中包含框架的名称。
top对象指向最高（最外）层的框架，即浏览器窗口。
parent（父）对象指向当前框架的直接上层框架。在没有框架的情况下，parent等于top等于window。
self对象（当前窗口），始终指向window。

3、窗口位置

screenLeft和screenTop属性：用于表示窗口相对于屏幕左边和上边的位置（IE、Safari、Opera、Chrome）。
screenX和screenY属性：用于表示窗口相对于屏幕左边和上边的位置（Firefox、Safari和Chrome）。特别注意的是，Opera也支持，但与screenLeft和screenTop属性并不对应。

4、窗口大小

在IE9+、Safari和Firefox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸。
在Opera中，outerWidth和outerHeight表示页面视图容器（单个标签页对应的浏览器窗口）的大小。
innerWidth和innerHeight表示该容器中页面视图区的大小（减去边框宽度）。
在Chrome中，outerWidth、outerHeight和innerWidth、innerHeight返回相同的值，即视口大小而非浏览器窗口大小。
在IE、Firefox、Safari、Opera和Chrome中，document.documentElement.clientHeight和document.documentElement.clientWidth保存了页面视口的信息。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>浏览器窗口大小</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var w = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;
        var h = window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;
        x = document.getElementById("demo");
        x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。";
    </script>
</body>
</html>

对于移动设备，window.innerWidth和window.innerHeight保存着可见视口，即屏幕上可见页面区域的大小。
使用resizeTo()和resizeBy()可以调整浏览器窗口的大小。

5、window.open()方法

作用：可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。
参数：要加载的URL、窗口目标、一个特性字符串和一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
- 一般情况下，只传递第一个参数。
- 如果该方法传递了第二个参数
  - 该参数是已有窗口或框架名称，那么就在具有该名称的窗口或框架中加载第一个参数指定的URL。
  - 该参数不是一个已经存在的窗口或框架，那么就会根据第三个参数创建一个新窗口或新标签页。如果没有传入第三个参数，就会打开一个带有全部默认设置的新的浏览器窗口。
- 在不打开新窗口时，会忽略第三个参数。
- 第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。
- 最后一个参数只在不打开新窗口的情况下使用。
close()方法可以关闭新打开的窗口，但是仅适用于通过window.open()打开的弹出窗口。

6、计时事件

通过使用JavaScript，在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
方法：
- 超时调用——setTimeout()方法：在指定的时间后执行指定的代码。
  - 第一个参数是含有JavaScript代码的字符串，也可以是一个函数。
  - 第二个参数是一个等待多长时间的毫秒数。
- clearTimeout()：停止执行setTimeout()方法的函数代码。
- 间歇调用——setInterval()方法：每隔指定的时间执行一次代码。
  - 第一个参数是含有JavaScript代码的字符串，也可以是一个函数。
  - 第二个参数间隔的毫秒数。
- clearInterval()：停止setInterval()方法执行的函数代码。

超时调用的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>超时调用</title>
</head>
<body>
    <p>点击第一个按钮等待5秒后出现"Hello"弹框。</p>
    <p>点击第二个按钮来阻止第一个函数运行。（你必须在5秒之前点击它）。</p>
    <button onclick="myFunction()">点我</button>
    <button onclick="stopFunction()">停止弹框</button>
    <script>
        var myVar;
        function myFunction(){
            myVar=setTimeout(function(){alert("Hello")},5000);
        }
        function stopFunction(){
            clearTimeout(myVar);
        }
    </script>
</body>
</html>

间歇调用的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>显示和暂停当前时间</title>
</head>
<body>
    <p>当前时间为：</p>
    <p id="demo"></p>
    <button onclick="stopClick()">停止时钟</button>
    <script>
        var time = setInterval(function(){curTimer()},1000);
        function curTimer(){
            var d = new Date();
            var t = d.toLocaleTimeString();
            document.getElementById("demo").innerHTML = t;
        }
        function stopClick(){
            clearInterval(time);
        }
    </script>
</body>
</html>

7、系统对话框

1）警告框——alert()方法

警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。

2）确认框——confirm()方法

确认框通常用于验证是否接受用户操作。
当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。
当你点击 “确认”, 确认框返回 true，如果点击 “取消”, 确认框返回 false。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>确认框</title>
</head>
<body>
    <p>点击按钮，显示确认框。</p>
    <button onclick="myFunction()">click！</button>
    <script>
        function myFunction(){
            var r=confirm("Are you sure?");
            if (r==true){
                alert("I'm so glad you're sure!");
            }
            else{
                alert("I'm sorryto hear you're not sure!");
            }
        }
    </script>
</body>
</html>

3）提示框——prompt()方法

提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>提示框</title>
</head>
<body>
    <button onclick="myFunction()">click!</button>
    <script>
        function myFunction(){
            var person=prompt("请输入你的名字","");
            if (person!=null && person!=""){
                alert("Welcome, " + person);
            }
        }
    </script>
</body>
</html>

4）弹窗使用“反斜杠+n”(\n) 来设置换行。

alert("Hello\nHow are you?");

二、location对象（window.location）

提供与当前窗口中加载的文档有关的信息，比如当前也页面的地址（URL）。
提供一些导航功能，比如把浏览器重定向到新的页面。
在编写时可以不使用window这个前缀。
属性：
- location.hostname：返回web主机的域名。
- location.pathname：返回当前页面的路径和文件名。
- location.port：返回web主机的端口。
- location.protocol：返回所使用的web协议（http://或https://）。
- location.href：返回当前页面的URL。
- location.search：返回URL的查询字符串。这个字符串以问号开头。
位置操作
- location.assign()方法：传入一个参数，即URL。该方法会打开一个新URL并在浏览器的历史记录中生成一条记录。
- replace()方法：接受一个参数，即导航到的URL。该方法会打开一个新URL，但不会在历史记录中生成新纪录。
- reload()方法：不传递任何参数。作用是重新加载当前页面。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>位置操作</title>
    <script>
        function newDoc(){
        window.location.assign("http://www.baidu.com")
        }
    </script>
</head>
<body>
    <input type="button" value="加载新文档" onclick="newDoc()">
</body>
</html>

三、navigator对象

包含浏览器厂商和版本信息。
在编写时可以不使用window这个前缀。
属性：通常用于检测显示网页的浏览器类型。
- appName：Web浏览器的全称。
- appVersion：浏览器版本。
- userAgent：浏览器的用户代理字符串。通常包含appVersion中的所有信息。
- platform：浏览器所在的系统平台。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>navigator对象</title>
</head>
<body>
    <div id="example"></div>
    <script>
        txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
        txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
        txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
        txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
        txt+= "<p>硬件平台: " + navigator.platform + "</p>";
        txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
        txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
        document.getElementById("example").innerHTML=txt;
    </script>
</body>
</html>

1、plugins数组（非IE浏览器）：用于检测插件。

name：插件的名字。
description：插件的描述。
filename：插件的文件名。
length：插件所处理的MIME类型数量。

2、注册处理程序

registerContentHandler()方法接受三个参数：要处理的MIME类型、可以处理该MIME类型的页面的URL以及应用程序的名称。
registerProtocolHandler()方法接受三个参数：要处理的协议、处理该协议的页面的URL和应用处理程序的名称。

四、screen对象（window.screen）

用来表明客户端的能力。
包含有关用户屏幕的信息，比如像素宽度和高度等。
在编写时可以不使用window这个前缀。
属性：
- screen.availWidth：可用的屏幕宽度
- screen.availHeight：可用的屏幕高度

五、history对象（window.history）

包含浏览器的历史。
在编写时可以不使用window这个前缀。
方法：
- history.go()：在用户的历史记录中任意跳转。
  - 接受一个参数，表示向后或向前跳转的页面数的一个整数值（负数表示向后跳转，正数表示向前跳转）。
  - 传递一个字符串参数，浏览器会跳转到历史记录中包含该字符串的第一个（最近）位置（可前可后），如果历史记录不包含该字符串，那么这个方法什么都不做。
- history.back()：加载历史列表中的前一个URL，与在浏览器点击后退按钮相同。
- history.forward()：加载历史列表中的下一个URL，与在浏览器中点击按钮向前相同。

history.go(-1); //后退一页
history.go(2);  //前进两页
history.go("wrox.com"); //跳转到最近的wrox.com页面

lollipop94

关注

0
点赞
踩
0

收藏

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

BOM
复制链接

扫一扫

专栏目录