BOM—浏览器对象模型

最新推荐文章于 2022-10-30 18:05:04 发布

meijory

最新推荐文章于 2022-10-30 18:05:04 发布

阅读量519

点赞数

分类专栏： javascript 文章标签： javascript bom 浏览器对象

本文链接：https://blog.csdn.net/meijory/article/details/76157259

版权

javascript 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

BOM提供了很多对象，用于访问浏览器的功能。

1. window 对象

BOM 的核心对象，表示浏览器的一个实例。
在浏览器中，它既是通过JavaScript访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象；

1.1 全局作用域

由于 window 对象是一个 Global 对象，因此，所有 JavaScript 全局变量、函数均自动成为 window 对象的属性和方法。

定义全局变量与在 window 对象上直接定义的属性还是有一点差别：
全局变量不能通过 delete 操作符删除，而在 window 对象上直接定义的属性可以。

1.2 窗口关系及框架

如果页面中包含有框架，则每个框架都拥有自己的 window 对象，并且保存在frames集合中

在frames集合中，可以通过数值索引（0开始，从左到右，从上到下）或框架名称来访问相应的 window对象。

一个框架居上两个框架居下

<html>
<head>
    <title></title>
</head>
<frameset rows="160,*">
    <frame src="topFrame.htm" name="topFrame"></frame>
    <frameset rows="50%,50%">
        <frame src="leftFrame.htm" name="leftFrame"></frame>
        <frame src="rigthFrame.htm" name="rightFrame"></frame>
    </frameset>
</frameset>
</html>

这里写图片描述

top对象始终指向最外围的框架，即浏览器窗口；
parent对象始终指向当前框架的直接上层框架；
self对象则回指window；
所有这些对象时 window 对象的属性，可以通过 window.top 等形式来访问。

1.3 窗口位置及大小

1）窗口位置

IE、Chrome、Opera 以及 Safari :
screenLeft、screenTop：窗口相对于屏幕左边和上边的位置。
Firefox:
screenX、screenY：提供相同的窗口位置信息

跨浏览器取得窗口左边和上边的

  var leftPos = (typeof window.screenLeft == "number") ? window.screenleft : window.screenX;
  var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

浏览器取得窗口左边和上边的精确坐标值。但是使用 moveTo() 和 moveBy() 方法可以将窗口移动到一个新的位置。

window.moveTo(100,200) 将窗口移动到（100,200）
window.moveBy(10,20) 将窗口向右移动10个像素，向下移动20个像素
这两个方法可能会被禁用。而且都不适用于框架，只能对最外层的 window 对象使用。

2）窗口大小
有三种方法能够确定浏览器窗口的尺寸
对于IE9+、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

但是使用 resizeTo() 和 resizeBy() 方法可以调整浏览器窗口的大小。

window.resizeTo(100,100) 将窗口调整到（100*100）
window.resizeBy(100,50) 将窗口调整到（200*150）
这两个方法可能会被禁用。而且都不适用于框架，只能对最外层的 window 对象使用。

1.4 导航和打开窗口

window.open()——导航到一个特定的URL或打开一个浏览器窗口。
该方法会返回一个指向新窗口的引用。

接收4个参数：

要加载的URL
窗口目标（已有窗口或框架的名称）
一个特性字符串
布尔值（是否取代浏览器历史记录中当前加载页面）

通常只须传入第一个参数。
第二个参数：

如果该参数是已有窗口或框架的名称，则会在已有该名称的窗口或框架中加载第一个参数指定的URL。
否则，就会创建一个以该名称命名的新窗口或框架。

//等同于<a href = "http://www.wrox.com" target = "topFrame"></a>
window.open("http://www.wrox.com","topFrame");

第二个参数可以使以下特殊的窗口名：_top，_parent，_self，_blank

第三个参数：
设置新窗口的特性，以逗号分隔的字符串。例如宽度width，高度height，左坐标left，上坐标top，是否可拖动改变大小resizable，是否允许滚动scrollbars等等。

var wroxwin = window.open("http://www.wrox.com","topFrame","heght=400,width=400,top=10,left=10,resizable=yes");

close()方法关闭通过 window.open()打开的弹出窗口。
closed属性——弹出窗口关闭后，窗口的引用还在，可以通过该属性进行检测。

wroxwin.close();
alert(wroxwin.closed);//true

opener属性——保存着打开它的原始窗口对象。

alert(wroxwin.opener == window);//true

1.5 间歇调用和超时调用

超时调用——在指定的时间过后再执行代码。
间歇调用——按指定的时间间隔重复执行代码。

1）超时调用
setTimeout(要执行的代码, 等待的时间/ms);返回一个数值ID，表示超时调用。

第一个参数：可以使JavaScript代码的字符串（不推荐，传递字符串会导致性能损失），也可以是一个函数
第二个参数：经过该时间后代码不一定会执行。
原因是 JavaScript 是单线程解释器，一定时间内只能执行一段代码。为了控制要执行的代码，有一个JavaScript 任务队列。这些任务会按照它们添加到队列的顺序执行。如果队列为空，那么添加的代码就会立即执行；否则需要等待前面的执行完了以后再执行。

clearTimeout()取消超时调用。

var timeoutID = setTimeout(function(){
    alert("Hello World!");
},1000);
clearTimeout(timeoutID);

2）间歇调用
setInterval(要执行的代码, 等待的时间/ms);返回一个间歇调用ID
clearInterval()取消间歇调用。

var num = 0,max=10;
var interval = null;
function add(){
    num++;
    if(num == max){
        clearInterval(interval);
        alert("stop");
    }
}
interval = setInterval(add,1000);

使用超时调用来模拟间歇调用

var num = 0,max=10;
var interval = null;
function add(){
    num++;
    if(num < max){
        setTimeout(add,500);
    }else{
        alert("stop");
    }
}
setTimeout(add,500);

1.6 系统对话框

浏览器通过alert()、confirm()、prompt()方法调用系统对话框向用户显示信息
系统对话框与显示的网页没有关系（不包含HTML），它的外观由操作系统或浏览器设置决定，不是由 CSS 决定。
alert()——“警告”对话框。接收一个字符串。
confirm()——“确认”对话框。
prompt()——“提示”对话框。用于提示用户输入一些文本。

2.location 对象

它提供了与当前文档有关的信息；还提供了一些导航功能。
它可以将 URL 解析为独立的片段。

它既是 window 对象的属性，也是 document 对象的属性。
window.location 和 document.location 引用的是同一个对象。

用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location对象的所有属性：

location.href       返回当前页面的URL(http://www.wrox.com)
location.protocol   返回所使用的 web 协议（http:// 或 https://）
location.host       返回服务器名称和端口号（www.wrox.com:80）
location.hostname   返回 web 主机的域名(www.wrox.com)
location.port       返回 web 主机的端口（80 或 443）
location.pathname   返回当前页面的路径和文件名(/file/)
location.search     返回URL查询字符串（?q=javascript）
location.hash       返回 URL 中的hash(#content)

解析查询字符串代码：

function getQueryStringArgs(){
    var str = location.search;
    var qs = str.length > 0?str.substring(1) : "";
    var args = {},item = null,name = null,value = null;
    var items = qs.length ? qs.split("&") : [];

    for(var i = 0;i<items.length;i++){
        item = items[i].split("=");
        name = decodeURIComponet(item[0]); //解码
        value = decodeURIComponet(item[1]);
        if(name.lenght)
            args[name] = value;
    }
    return args;
}

location.assign("url")——加载一个新的 URL

location.assign("http://www.baidu.com");等价于
window.location="http://www.baidu.com ";
location.href="http://www.baidu.com ";

修改 location 对象的其他属性也可以改变当前加载页面。
通过以上方式修改 URL 之后，浏览器历史记录中就会生成一条记录。

location.replace("url")——导航到一个新的URL，会替换历史记录中当前显示的页面。不会在历史记录中生成新纪录。因此，调用此方法之后用户不能回到前一个页面。
location.reload()——重新加载当前显示页面。

location.reload();//有可能从缓存中加载；
location.reload(true);//从服务器中加载

3.navigator 对象

包含有关浏览器的信息
navigator对象的属性通常用于检测显示网页的浏览器类型

<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>

4.screen 对象

包含有关用户屏幕的信息。如像素宽度、高度。只是用来表明客户端能力。

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

5.history 对象

保存着浏览器的历史记录

history.go()——可以在用户的历史记录中任意跳转（向前或向后）

history.go(-1);  //后退一页 类似“后退”按钮
history.go(2)；  //前进两页 类似“前进”按钮

//给go()方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置； 如果不包含，什么也不做；
history.go("baidu.com");//跳转到最近的 baidu.com 页面

history.back() —— 后退一页
history.forward()——前进一页
history.length——保存着历史记录的数量