首页 > js学习 > js常用函数 > javascript中BOM的window对象的方法
2016
12-16

javascript中BOM的window对象的方法

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

window对象:BOM的核心对象是window,它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层,对于每个打开的窗口,系统都会自动为其定义 window 对象。

Window 对象方法

方法 描述
alert() 显示带有一段消息和一个确认按钮的警告框。
focus() 把键盘焦点给予一个窗口,将焦点移至窗口
blur() 把键盘焦点从顶层窗口移开,将焦点从窗口移除
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 timeout,清除之前设置的定时器间隔
setTimeout() 在指定的毫秒数后调用函数或计算表达式
clearTimeout() 取消由 setTimeout() 方法设置的 timeout,清除之前设置的超时
close() 关闭当前浏览器窗口
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
moveBy() 可相对窗口的当前坐标把它移动指定的像素
moveTo() 把窗口的左上角移动到一个指定的坐标
open() 打开一个新的浏览器窗口并返回新window对象或查找一个已命名的窗口
prompt(text,defaultInput) 创建一个对话框要求用户输入信息
print() 打印当前窗口的内容,调出打印对话框
prompt() 显示可提示用户输入的对话框
resizeBy() 按照指定的像素调整窗口的大小
resizeTo() 把窗口的大小调整到指定的宽度和高度
scrollBy() 按照指定的像素值来滚动内容
scrollTo(x,y)或者scroll(x,y) 把内容滚动到指定的坐标

相关链接:javascript中BOM的window对象的属性

一、系统对话框

1、alert('Lee');//直接弹出警告

2、if (confirm('请确定或者取消')) {alert('您按了确定!');} else {alert('您按了取消!');}

onfirm本身有返回值,onfirm参数为提示文本,按确定返回true,按取消返回false

3、var num = prompt('请输入一个数字', 0);

两个参数,一个文字提示,一个是默认值(可省略),当用户在输入框输入一个值时获取该值并赋值给该变量,可在后面调用

二、新建窗口

使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。

它可以接受四个参数:1.要加载的URL;2.窗口的名称或窗口目标;3.一个特性字符串;4.一个表示新页面是否取代浏览器记录中当前加载页面的布尔值。

open('http://www.baidu.com'); //新建页面并打开百度

open('http://www.baidu.com','baidu'); //新建页面并命名窗口并打开百度

open('http://www.baidu.com','_parent'); //在当前窗口或父窗口打开百度,_parent是新建一个目标使得文档载入父窗口或者包含超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 self 等效。

不命名会每次打开新窗口,命名的第一次打开新窗口,之后在这个窗口中加载。窗口目标是提供页面的打开的方式,比如本页面,还是新建。

第三字符串参数

width:一个数值,新窗口的宽度。不能小于100

height:一个数值,新窗口的高度。不能小于100

top:一个数值,新窗口的Y坐标。不能是负值

left:一个数值,新窗口的X坐标。不能是负值

location:yes或no,是否在浏览器窗口中显示地址栏。不同浏览器默认值不同

menubar:yes或no,是否在浏览器窗口显示菜单栏。默认为no

resizable:yes或no,是否可以通过拖动浏览器窗口的边框改变大小。默认为no

scrollbars:yes或no,如果内容在页面中显示不下,是否允许滚动。默认为no

status:yes或no,是否在浏览器窗口中显示状态栏。默认为no

toolbar:yes或no,是否在浏览器窗口中显示工具栏。默认为no

fullscreen:yes或no,浏览器窗口是否最大化,仅限IE

示例:open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');

open本身返回window对象

var box = open(); box.alert('');//可以指定弹出的窗口执行alert();

三、间歇调用和超时调用

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

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

setTimeout("alert('Lee')", 1000);//不建议直接使用字符串

function box() {alert('Lee');}

setTimeout(box, 1000); //直接传入函数名即可

setTimeout(function () {alert('Lee');}, 1000);//推荐做法,直接使用函数传入的方法,扩展性好,性能更佳。

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

要取消尚未执行的超时调用计划,可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。

var box = setTimeout(function () {alert('Lee');}, 1000);//把超时调用的ID复制给box

clearTimeout(box); //把ID传入,取消超时调用

间歇调用与超时调用类似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。

设置间歇调用的方法是setInterval(),它接受的参数与setTimeout()相同:要执行的代码和每次执行之前需要等待的毫秒数。

setInterval(function () {alert('Lee');}, 1000);//重复不停执行

取消间歇调用方法和取消超时调用类似,使用clearInterval()方法。但取消间歇调用的重要性要远远高于取消超时调用,因为在不加干涉的情况下,间歇调用将会一直执行到页面关闭。

var box = setInterval(function () {alert('Lee');}, 1000);//获取间歇调用的ID

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

但上面的代码是没有意义的,我们需要一个能设置5秒的定时器,需要如下代码:

var num = 0; //设置起始秒

var max = 5; //设置最终秒

setInterval(function () { //间歇调用

num++; //递增num

if (num == max) { //如果得到5秒

clearInterval(this); //取消间歇调用,this表示方法本身

alert('5秒后弹窗!');

}

}, 1000); //每1秒num递增一次

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

var num = 0;

var max = 5;

function box() {

num++;

if (num == max) {

alert('5秒后结束!');

} else {

setTimeout(box, 1000);

}

}

setTimeout(box, 1000); //执行定时器

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

四、调整浏览器的位置和窗口大小

1、调整浏览器位置

moveTo(0,0); //IE有效,移动到0,0坐标

moveBy(10,10); //IE有效,向下和右分别移动10像素

2、调整浏览器大小

resizeTo(200,200); //IE有效,调正大小

resizeBy(200,200); //IE有效,扩展收缩大小

由于此类方法被浏览器禁用较多,用处不大。

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。