BOM（浏览器对象模型）的一些操作

2023-01-30 09:53:52

一个完整的JavaScript实现由三部分组成：

ECMAScript：核心，定义语言基础，规定了语言的组成部分（语法，类型，关键字，保留字，对象等）
DOM：文档对象模型，·DOM把整个页面映射成一个多层节点结构（树形），从而我们可以自如的删除、添加、替换或修改任何节点
BOM：浏览器对象模型，支持访问和操作浏览器窗口，使用BOM可以控制浏览器显示的页面以外的部分。

BOM提供了很多对象，用于访问浏览器的功能，以下逐一介绍:

1、window对象

window对象是BOM的核心对象，在浏览器中window对象有两个作用：①充当全局作用域②表示浏览器窗口

①充当全局作用域

所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法

var a =1;

alert(window.a);//

function fun(){

 alert(this.a);

}

window.fun();//

②表示浏览器窗口

窗口位置 screenLeft、screenTop（Firefox不支持这两个属性）分别表示窗口相对于屏幕左边和上边的位置；
在Firefox浏览器中用screenX、screenY来提供相应的窗口位置信息；以上的属性都无法保证在跨浏览器的条件下取得窗口左边和上边的精确坐标值。
window.moveTo(新位置的X的坐标，新位置的Y的坐标)、window.moveBy(水平方向上移动的像素数，垂直方向上移动的像素数) 方法可以将窗口精确地移动到一个新的位置。
这两个方法不适用与框架，只对外层的window对象使用，且在Opera和IE7+中默认是禁用的
窗口大小 outWidth,outHeight；innerWidth、innerHeight 在各个浏览器中所表示的大小含义有所不同
打开窗口 window.open() 既可以打开一个新的浏览器窗口也可以导航到一个特定的URL
语法：window.open(URL,name,features,replace)
- URL:要加载的URL；
- name：可选，窗口的目标可以是窗口或框架的名字，如果有具有该名字的窗口或框架中，就会在其中加载第一个参数指定的URL，否则就会创建一个新的窗口并为其命名为name；也可以是_self,_parent,_top或者_blank；
- features 可选，由逗号分隔的设置字符串，表示在新窗口中都显示哪些特性，如：height、left、resizable、status等。在不打开新窗口的情况下会忽略该参数，如果忽略，打开新窗口时采用默认设置；
- replace 可选，一个布尔值，表示新页面是否取代浏览器历史记录中当前加载页面，该参数只有在不打开新窗口的情况下使用。
窗口关系及框架如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中可以通过数组索引或者框架名称来访问相应的window对象如：window.frames[0]
显示”打印“对话框 window.print();

2、location对象：表示当前页面的URL信息

location对象提供了与当前窗口中加载的文档的URL有关的信息；通过访问location的不同的属性可以访问url中不同的片段信息

href 返回当前加载页面的完整URL
host 返回服务器名称和端口号（如果有）
hostname 返回不带端口号的服务器名称
hash 返回URL中的hash（#后面的零或多个字符）
port 返回URL中指定的端口号。如果URL中不包括端口号则这个属性返回空字符串
protocol 返回页面使用的协议。通常是http:或https:
pathname 返回URL中的目录和文件名
search 返回URL的查询字符串。这个字符串以问号开头

3、navigator对象：提供了与浏览器有关的信息

navigator对象的属性通常用于监测显示网页的浏览器的类型。每个浏览器中的Navigator对象都有一套自己的属性，以下列出部分属性：

  //每个属性的值根据所用的浏览器的不同而不同

 //appName 完整的浏览器名称

 document.write(navigator.appName+"<br/>");//Netscape

 //language 浏览器的主语言

 document.write(navigator.language+"<br/>");//zh-CN

 //onLine 表示是否连接到了因特网

 document.write(navigator.onLine+"<br/>");//true

 //platform 浏览器所在的系统平台

 document.write(navigator.platform+"<br/>");//Win64

 //userAgent 浏览器的用户代理字符串

 document.write(navigator.userAgent+"<br/>");//Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0

4、screen对象：保存着与客户端显示器（屏幕）有关的信息

screen对象用处不大，基本上只用来表示客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。以下列出部分属性：

 //每个属性的值根据所用的设备不同而不同

 //availHeight 屏幕的像素高度减系统部件高度之后的值

 document.write(screen.availHeight);//

 //height屏幕的像素高度

 document.write(screen.height);//

 //availWidth屏幕的像素宽度减系统部件宽度之后的值

 document.write(screen.availWidth);//

 //width屏幕的像素宽度

 document.write(screen.width);//

 //colorDepth用于表示颜色的位数

 document.write(screen.colorDepth);//

5、history对象：保存着用户上网的历史记录

go()方法可以在用户的历史记录中任意跳转
　　history.go(-1);//后退一页
　　history.go(1);//前进一页
　　history.go(2);//前进两页

back()方法模拟浏览器的“后退”按钮

　　history.back();//后退一页

forward()方法模拟浏览器的“前进”按钮

　　history.forward();//前进一页

history也不常用，在创建自定义的“后退”和“前进”按钮时经常使用到。

history还有个length属性，保存着历史记录的数量。当页面的URL改变时，就会生成一条历史记录。

码农公寓