BOM，浏览器对象模型

2020-06-24 11:00:36 浏览数 (2)

一、BOM

浏览器对象模型

BOM也叫浏览器对象模型，它提供了很多对象，用于访问浏览器的功能。BOM缺少规范，每个浏览器提供商又按照自己想法去扩展它，那么浏览器共有对象就成了事实的标准。所以，BOM本身是没有标准的或者还没有哪个组织去标准它。

1.window对象：

BOM的核心对象是window，它表示浏览器的一个实例，在浏览器中window对象有双重角色既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

window对象处于JavaScript结构的最顶层，对于每个打开的窗口，系统都会自动为其定义 window 对象。

window结构：

window

|

document frames history location navigator screen

window对象有一系列的属性，这些属性本身也是对象。详见w3school的文档。

window下的属性和方法，可以使用window.属性、window.方法()或者直接属性、方法()的方式调用。例如：window.alert()和alert()是一个意思。

1.系统对话框：

alert(),confirm(),prompt()方法可以调用系统对话框向用户显示消息。显示这些对话框的时候代码会停止执行，关掉这些对话框后代码又会恢复执行。

alert()

该方法接受一个字符串并将其显示给用户。该对话框会包含指定的文本和一个"OK"按钮。主要用来显示警告信息

confirm()

确认对话框，显示包含指定的文本和一个"OK"按钮以及"Cancel"按钮。该方法返回布尔值，true表示单击了OK，false表示单击了cancel或者X按钮

代码语言：javascript复制
if(confirm("确定吗？？")){
alert("好！");
}else{
alert("切！");
}
prompt()

会话框，提示用户输入一些文本。显示包含文本，ok按钮,cancel按钮以及一个文本输入域，以供用户在其中输入内容。传入两个参数，要显示给用户的文本提示和文本输入域的默认值。

如果用户单击OK按钮，该方法返回输入域的值，如果用户单击了Cancel或者关闭对话框该方法返回null.

2、导航和打开窗口

window.open()

使用window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。它可以接受四个参数：

参数：

1)要加载的URL

2)窗口目标,框架名

特殊名：

_self 当前浏览器页面

_parent 当前页面父页面

_top 当前页面顶级页面

_blank 新页面

framename 在指定的frame中打开

windowname 指定名字的页面中打开

3) 一个特定字符串

是用逗号分隔的设置字符串

fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，仅限IE浏览器

width=pixels 窗口的宽度.最小.值为100

height=pixels 窗口的高度。最小.值为100

left=pixels 该窗口的左侧位置

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

top=pixels 窗口顶部的位置.仅限IE浏览器

4)表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

如果传递了第二个参数，而且该参数是已有窗口或框架的名称，就会在具有该名称的窗口或框架中加载第一个参数指定的URL。

如果给window.open传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页

代码语言：javascript复制
open('http://www.baidu.com'); //新建页面并打开百度
open('http://www.baidu.com','baidu'); //新建页面并命名窗口并打开百度
open('http://www.baidu.com','_parent'); //在本页窗口打开百度,_blank是新建
open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');

调整窗口大小

代码语言：javascript复制
        //调整到100*100
      resizeTo(100,100);//接受浏览器窗口的新高度和新宽度
      //调整到200*150
      resizeBy(100,50); //接受新窗口与原窗口的宽度和高度之差

移动窗体

多用于新建窗体

代码语言：javascript复制
      window.moveTo(0,0); 接受的是新位置的x和y坐标值
      window.moveBy(0,100);接受的是在水平和垂直方向上移动的像素值。

滚动条

代码语言：javascript复制
      scrollBy(xnum,ynum) 方法可把内容滚动指定的像素数。注意： 要使此方法工作 window 滚动条的可见属性必须设置为true！
      scrollTo(xpos,ypos) 方法可把内容滚动到指定的坐标。

例如：

创建新窗体

代码语言：javascript复制
   var w = window.open("http://www.baidu.com","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");

改变窗体大小

w.resizeTo(400,200);

3.窗口位置

screenLeft和screenTop属性返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)

screenX和screenY属性返回窗口相对于屏幕的X和Y坐标。(ie8及以下浏览器不支持)

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

IE8及更早IE版本不支持该属性,但可以使用 "document.body.scrollLeft" 和 "document.body.scrollTop" 属性 。

代码语言：javascript复制
//跨浏览器的方法
var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;
var topY = (typeof screenTop == 'number') ? screenTop : screenY;

4.窗口大小

innerWidth 页面视图区的宽度

innerHeight 页面视图区的高度

outerWidth 浏览器窗口的宽度

outerHeight 浏览器窗口的高度

所有主流浏览器都支持innerWidth,innerHeight,outerWidth,outerHeight 属性。注意：IE8及更早IE版本不支持这些属性。

5. screen对象（详见w3c的js screen对象）

屏幕总宽度/高度:

screen.width

screen.height

可用宽度/高度:

screen.availWidth

screen.availHeight

颜色深度:

screen.colorDepth

颜色分辨率:

screen.pixelDepth

6.间歇调用和超时调用

JavaScript是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。

超时调用需要使用window对象的setTimeout()方法，它接受两个参数：要执行的代码和毫秒数的超时时间。

1) setTimeout();

该方法返回一个数值ID，表示超时调用，这个超时调用ID是计划执行代码的唯一标识符通过它来取消超时调用。可以通过clearTimeout(ID);

参数：

1.要执行的代码

2.以毫秒表示的时间。

例如:

一秒后调用

代码语言：javascript复制
var id = setTimeout(function(){
alert(1000);
},1000);
console.log(id);
//清除
clearTimeout(id);

2) setInterval();

按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID，该ID可以用户在将来某个时刻取消间歇调用

参数：

1.要执行的代码

2.以毫秒表示的时间。

clearInterval(ID); //取消间歇调用

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

代码语言：javascript复制
var num = 0;
var max = 10;
function incrementNum(){
num   ;
if(num < max){
alert(num);
setTimeout(incrementNum,500);
}else{
alert("Done" num);
}
}
setTimeout(incrementNum,500);

一般认为，使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下，很少使用真正的间歇调用，因为需要根据情况来取消ID，并且可能造成同步的一些问题，我们建议不使用间歇调用，而去使用超时调用。

note:

在使用超时调用时，没必要跟踪超时调用ID，因为每次执行代码之后，如果不再设置另一次超时调用，调用就会自行停止。

alert document screen url window

0 人点赞