目录
BOM(Browser Object Model)即浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。
一、window对象
BOM分核心对象是window,它表示浏览器的一个实例。window对象处于JS结构的顶层位置,对于每一个打开的窗口,系统都会自动为其定义一个window对象。
JS结构层次:
1、对象的属性和方法
window对象有一系列的属性,这些属性本身又是对象,
属性 | 含义 |
closed | 当关闭窗口时为真 |
defaultStatus | 窗口底部状态栏显示的默认状态消息 |
document | 当前窗口中显示的文档对象 |
frames | 窗口中的框架对象数组 |
history | 保存窗口最近加载的URL |
length | 窗口中的框架数 |
location | 当前窗口的URL |
name | 窗口名 |
offscreenBuffering | 用于绘制新窗口内容并在完成后复制已存在的内容,控制屏幕更新 |
opener | 打开当前窗口 |
parent | 指向包含另一个窗口的窗口(由框架使用) |
screen | 显示屏幕相关信息,如高度、宽度(单位像素) |
self | 指示当前窗口 |
status | 描述由用户交互导致的状态栏的临时信息 |
top | 包含特定窗口的最顶层窗口(有框架使用) |
window | 指示当前窗口,与self等效 |
方法 | 功能 |
alert(text) | 创建一个警告对话框,显示一条信息 |
blur() | 将焦点从窗口移除 |
clearInterval(interval) | 清除之前设定的定时器间隔 |
clearTimeOut(timer) | 清除之前设置的超时 |
close() | 关闭窗口 |
confirm() | 创建一个需要用户确认的对话框 |
focus() | 将焦点移至窗口 |
open(url,name,[options]) | 打开一个新窗口并返回新的window对象 |
prompt(text,defaultInput) | 创建一个对话框要求用户输入信息 |
scroll(x,y) | 在窗口中滚动到有个像素点的位置 |
setInterval(expression,milliseconds) | 经过指定时间间隔后计算一个表达式 |
setInterval(function,milliseconds,[arguments]) | 经过指定时间间隔后调用一个函数 |
setTimeout(expression,milliseconds) | 在定时器超过后计算一个表达式 |
setTimeout(expression,milliseconds,[arguments]) | 在定时器超过后调用一个函数 |
print() | 调出打印对话框 |
find() | 调出查找对话框 |
window对象下的属性和方法,可以使用window.属性、window.方法()或者直接属性、方法()的方式调用,效果等同。例如:window.alert()和alert()是一个意思。
对于window对象的方法有诸多在学习记录-关于输出中有所整理。
2、窗口的大小与位置
(1)位置信息
IE、Safari、Opera和Chrome都提供了screenLeft和screenTop属性用来确定和修改window对象的位置,Firefox、Safari和Chrome也可在screenX和screenY属性中提供相同的窗口位置信息。
alert(screenLeft);
//小窗口模式,窗口放在屏幕任意位置,显示窗口到左屏幕的距离
//全屏模式,贴着左屏幕,距离当然为0
alert(typeof screenLeft); //返回number
alert(screenX); //X为到左屏幕距离,Y为到上屏幕距离
对于不同浏览器,表示的位置也不同,因此可用跨浏览器的方法来表示(三目运算符),
var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;
var topY = (typeof screenTop == 'number') ? screenTop : screenY;
(2)大小信息
而对窗口页面大小的修改,Firefox、Safari、Opera和Chrome均为此提供了4个属性:innerWidth和innerHeight,返回浏览器窗口本身的尺寸;outerWidth和outerHeight,返回浏览器窗口本身及边框的尺寸。
alert(innerWidth); //页面长度
alert(innerHeight); //页面高度
alert(outerWidth); //页面长度+边框
alert(outerHeight); //页面高度+边框
(3)保存信息
在IE以及Firefox、Safari、Opera和Chrome浏览器的标准模式中,
document.documentElement.clientWidth 和 document.documentElement.clientHeight中保存了页面窗口的信息。
var width=window.innerWidth;
var height=window.innerHeight;
if(typeof width!="number"){
if(document.compatMode=="CSS1Compat"){
width=document.documentElement.clientWidth;
height=document.documentElement.clientHeight;
}
else{
width=document.body.clientWidth;
height=document.body.clientHeight;
}
}
上述代码可以适用于不同模式,document.compatMode可以确定页面是否处于标准模式,如果返回CSS1Compat即标准模式。当不是标准模式时,通过document.body.clientWidth和document.body.clientHeight取得相同的信息。
3、间歇调用和超时调用
JavaScript是单线程语言,
由此不禁想起了操作系统的知识
什么是进程?
当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源。而一个进程又是由多个线程所组成的。什么是线程?
线程是程序中的一个执行流,每个线程都有自己的专有寄存器(栈指针、程序计数器等),但代码区是共享的。即不同的线程可以执行同样的函数。什么是单线程?
每个正在运行的程序(即进程),至少包括一个线程,这个线程叫主线程。主线程在程序启动时被创建,用于执行main函数。所以只有一个主线程的程序,称作单线程程序。主线程负责执行程序的所有代码(UI展现以及刷新,网络请求,本地存储等等)。这些代码只能顺序执行,无法并发执行什么是多线程?
多线程是指程序中包含多个执行流,即在一个程序中可以同时运行多个不同的线程来执行不同的任务。也就是说允许单个程序创建多个并行执行的线程来完成各自的任务。单线程、多线程的区别
单线程程序:只有一个线程,代码顺序执行,容易出现代码阻塞(页面假死)
多线程程序:有多个线程,线程间独立运行,能有效地避免代码阻塞,并且提高程序的运行性能
但JS允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。
(1)超时值是在指定的时间过后执行代码,
超时调用需要使用window对象的setTimeout()方法,它接受两个参数:要执行的代码和毫秒数的超时时间。其中第一个参数可以为字符串,里面可以为代码块,因为它有解析的功能,所以引号内部是可以执行的。
function demo(){
alert("bert");
}
setTimeout(demo,1000); //第二个参数表示最终输出显示的延迟时间
//等价于
setTimeout(function(){ //此方法更好,直接使用函数传入的方法,扩展性好,性能更佳。
alert("bert");
},1000);
调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用。这个超时调用的ID是计划执行代码的唯一标识符,可以通过它来取消超时调用。要取消尚未执行的超时调用计划,可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。
//引用w3school例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计时器</title>
<script type="text/javascript">
var number=0;
var count;
function timedCount(){
document.getElementById('txt').value=number;
number=number+1;
count=setTimeout("timedCount()",2000);
}
function stopCount(){
clearTimeout(count);
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()" />
<input type="text" id="txt" />
<input type="button" value="Stop count!" onClick="stopCount()" />
</form>
</body>
</html>
实验结果,很疑惑,
点击Start count!按钮一次,文本框中数字每两千毫秒递增,点击Stop count!按钮会停止当前的增长。但是如果连续点击Start count!按钮多次,则会出现一段数字突然快速增长,然后缓慢之后又是一段数字快速增长;多次点击Stop count!按钮则会不断减速。
(2)间歇时间值则是每隔指定的时间就执行一次代码。
间歇调用按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval(),它接受的参数:要执行的代码和每次执行之前需要等待的毫秒数。
setInterval(function(){
alert("bert");
},1000); //每隔1000毫秒弹出警告框信息
取消间歇调用方法,使用clearInterval()方法。取消间歇调用十分重要,因为在不加干涉的情况下,间歇调用将会一直执行到页面关闭。
var begin = 0; //设置起始秒
var end = 5; //设置最终秒
setInterval(function(){ //间歇调用
begin++; //递增num
if (begin == end) { //如果得到5秒
clearInterval(this); //取消间歇调用,this表示方法本身
alert('5秒后弹窗!');
}
}, 1000); //1秒
一般认为,使用超时调用来模拟间歇调用是一种最佳模式。在开发环境下,很少使用真正的间歇调用,因为需要根据情况来取消ID,并且可能造成同步的一些问题,我们建议不使用间歇调用,而去使用超时调用。
var begin=0;
var end=5;
function demo(){
begin++;
if(begin==end){
alert("5秒后结束");
}
else{
setTimeout(demo,1000);
}
}
setTimeout(demo,1000);
二、location对象
location对象是BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location对象是window对象的属性,也是document对象的属性,所以window . location和document . location等效。
属性 | 描述的URL内容 |
hash | 如果该部分存在表示锚点部分 |
host | 主机名:端口号 |
hostname | 主机名 |
href | 整个URL |
pathname | 路径名 |
port | 端口号 |
protocol | 协议部分 |
search | 查询字符串 |
方法 | 功能 |
assign() | 跳转到指定页面,与href等效 |
reload() | 重载当前URL |
repalce() | 用新的URL替换当前页面,不产生任何历史记录的跳转(不好回头) |
该些属性方法需在服务器上运行。
三、history对象
history对象是window对象的属性,它保存着用户上网的记录,从窗口被打开的那一刻算起。
属性 | 描述URL中的哪部分 |
length | history对象中的记录数 |
方法 | 功能 |
back() | 前往浏览器历史条目前一个URL,类似后退 |
forward() | 前往浏览器历史条目下一个URL,类似前进 |
go(num) | 浏览器在history对象中向前或向后 |
同样在服务器上运行才可以,
function back(){
history.back();
}
function forward(){
history.forward();
}
<a href="javascript:back">上一页</a>
<a href="javascript:forward">下一页</a>