JavaScript 浏览器对象模型BOM

1.window对象的属性和方法
window对象有一系列的属性,这些属性本身也是对象;

(1).属性
属性 含义
closed 当窗口关闭时为真;
defaultStatus 窗口底部状态栏显示的默认状态信息;
document 窗口中当前显示的文档对象;
frames 窗口中的框架对象数组;
history 保存有窗口最近加载的URL;
length 窗口中的框架数;
location 当前窗口中的URL;
name 窗口名;
offscreenBuffering 用于绘制新窗口内容并在完成后复制已存在的内容,控制屏幕更新;
opener 打开当前窗口的窗口;
parent 指向包含另一个窗口的窗口(由框架使用);
screen 显示屏幕相关信息,如高度/宽度(以像素为单位;)
self 指示当前窗口;
status 描述由用户交互导致的状态栏的临时信息;
top 包含特定窗口的最顶层窗口(由框架使用);
window 指示当前窗口,与self等效;

(2).方法
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,millisenconds,[arguments]) 经过指定时间间隔后调用一个函数;
setTimeout(expression,milliseconds)        在定时器超过后计算一个表达式;
steTimeout(function,milliseconds,[arguments]) 在定时器超过后调用一个函数;
print() 调出打印对话框;
find() 调出查找对话框;
// window下的属性和方法,可以使用window.属性、window.方法()或者直接属性、方法()的调用;
// window.alert(text)=alert(text);

2.系统对话框
浏览器通过alert()/confirm()和prompt()方法调用系统对话框向用户显示信息;
系统对话框与浏览器中显示的网页没有关系,也不包含HTML;
它们的外观由操作系统及(或)浏览器设置决定,而不是由CSS决定;
这几个方法打开的对话框都是同步和模态的;也就是说,显示这些对话框的时候代码会停止运行,而关掉这些对话框后代码又会恢复执行;


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

// 弹出警告

  alert(‘警告‘);

// 确认和取消

  if(confirm(‘请确定或取消‘){          // confirm()本身有返回值;

    alert(‘您选择了确定‘);           // 按确定,返回true值;

  })else{

    alert(‘您选择了取消‘);           // 按取消,返回false值;

  }

// 输入提示框

  var num = prompt(‘请输入一个数字‘,0);     // 第一个参数是文字提示;第二个参数是输入框模式填充值;并返回输入框中的值;

  alert(num);                 // 将prompt()方法返回的值赋给变量num;并弹出;

// 调用打印及查找对话框

  print();                   // 打印; 弹出浏览器打印窗口;

  find();                   // =>boolean;页面有匹配的查找内容返回true;相对于Ctrl+F;

// 状态栏

  defaultStatus = ‘状态栏默认文本‘;       // 浏览器底部状态栏初始默认值;

  status = ‘状态栏文本‘;            // 浏览器底部状态栏设置值;

3.新建窗口(open())

// 使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口;
// 它接收四个参数:
// (1).要加载的URL;
// (2).窗口的名称或窗口目标;
// (3).一个特定字符串;
// (4).一个表示新页面是否取代浏览器记录中当前加载页面的布尔值;
open(‘www.baidu.com‘); // chrome-search://local-ntp/www.baidu.com;打开失败;需要添加http://;
open(‘http://www.baidu.com‘); // 新建页面并跳转到百度;
open(‘http://www.baidu.com‘,‘搜索引擎‘); // 新建页面 打开百度页面 并命名窗口;并不会自动跳转;并且再次调用时只是刷新那个页面;
open(‘http://www.baidu.com‘,‘_parent‘); // 在本页面打开百度;‘_blank‘是指定新页面打开;
// 第三个字符串参数
设置 值 说明
width 数值 新窗口的宽度,不小于100px;
height 数值 新窗口的高度,不小于100px;
top 数值 新窗口的Y坐标,不能是负值;
left 数值 新窗口的X坐标,不能是负值;
location boolean 是否在浏览器窗口中显示地址栏;不同浏览器默认值不同;
menubar boolean 是否在浏览器窗口显示菜单栏,默认为no;
resizable boolean 是否通过拖动浏览器窗口边框来改变大小;默认no;
scrollbars boolean 如果页面内容显示不下,是否显示滚动条;默认no;
status boolean 是否在浏览器窗口中显示状态栏,默认no;
toolbar boolean 是否在浏览器中显示工具栏;默认no;
fullscreen boolean 浏览器窗口是否最大化;仅IE支持;
open(‘http://www.baidu.com‘,‘baidu‘,‘width=400,height=400,top=200,left=200,toolbar=yes‘);

// open()本身返回window对象
var box = open(); // 返回了一个window对象,打开了一个新空白页面;
box.alert(‘‘); // 然后指定在open()返回的对象打开的新页面弹窗;

// 字窗口操作父窗口
document.onclick = function(){         // 在新的窗口中点击docuement对象;
opener.document.write(‘子窗口让我输出的!‘);// 此时在产生它的父窗口会生成文字内容;
}

4.窗口的位置和大小


1

2

3

4

5

6

7

8

9

10

11

12

13

14

(1).窗口的位置

// 用来确定和修改window对象(浏览器窗口)相对于屏幕的位置:

// IE+Safari+Opera+Chrome都提供了screenLeft和screenTop属性,

// Firefox提供了screenX和screeY属性;

// 他们分别表示窗口看相对于屏幕左边和上边的位置;

  

// 确定窗口的位置=>IE

  alert(screenLeft);              // 浏览器左侧离屏幕的距离;

// 确定窗口的位置=>Firefox

  alert(screenX);                // 浏览器左侧离屏幕的距离;

// 跨浏览器的方法

  var leftX = (typeof screenLeft == ‘number‘) ? screenLeft : screenX;

  // 判断检测的screenLeft是否是数值,若是则使用screenLeft的值,否则使用screenX的值;


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

(2).窗口的大小

// 检测浏览器窗口本身及边框的尺寸:outerWidth和outerHeight;

  alert(outerWidth);

  alert(outerHeight);

// 检测页面大小属性:innerWidth和innerHeight;

  alert(innerWidth);

  alert(innerHeight);

// PS:IE没有提供当前浏览器窗口尺寸的属性; 在DOM中有提供相关的方法;

// 在IE及其他浏览器中,提供了:document.documentElement.clientWidth和document.documentElement.clientHeight;来保存页面窗口的信息;

// PS:在IE6中,上述属性在标准模式下才有效;如果是怪异模式,就必须通过document.body.clientWidth和document.body.clientHeight;

// 如果是Firefox等浏览器,直接使用innerWidth和innerHeight;

  var width = window.innerWidth;        // 这里要加window,因为IE会无效;

  var height = window.innerHeight;

  if(typeof width != ‘number‘){         // IE6浏览器

    if(document.compatMode == ‘CSS1Compat‘){ // 判断是IE6标准模式;使用documentElement;

      width = document.documentElement.clientWidth;

      height = document.documentElement.clientHeight;

    }else{                  // 否则是IE6非标准模式;使用body;

      width = document.body.clientWidth;

      height = document.body.clientHeight;

    }

  }

  // PS:以上方法可以通过不同浏览器取得各自的浏览器窗口可视部分的大小;

  // document.compatMode可以确定页面是否处于标准模式;


1

2

3

4

5

6

7

// 调整浏览器位置;

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

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

// 调整浏览器大小

  resizeTo(200,200);              // 调整大小;

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

5.间歇调用和超时调用
1 // JavaScript是单线程语言,但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行;
2 // 超时值:在指定的时间过后执行代码;
3 // 间隔值:每隔指定的时间就执行一次代码;


1

2

3

4

5

6

7

8

9

10

11

12

// 超时调用使用window对象的setTimeout()方法;

// 它接受两个参数:要执行的代码和毫秒数;

  setTimeout(function(){            // 直接使用函数传入的方法,扩展性好,性能更加;

    alert(‘警告!‘);

  },1000);

// 调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用;

// 这个超时调用的ID是计划执行代码的唯一标识符,可以通过它来取消超时调用;

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

  var box = setTimeout(function(){       // 将超时调用的ID赋值给变量box;

    alert(‘超时调用‘);

  },1000);

  clearTimeout(box);              // 将ID传入取消调用方法;


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

// 间歇调用使用window对象的setInterval()方法;

// 它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或页面被卸载;

// 它接收的参数与setTimeout()相同;

  var pox = setInterval(function(){

    alert(‘间隔调用‘);

  },1000);

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

// 利用setInterval()设置一个5秒的定时器;

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

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

  setInterval(function(){

    num++;                  // 递增num;

    if(num == max){             

      clearInterval(this);         // 取消间隔调用,this表示方法本身;一直跟踪间隔调用的ID;

      alert(‘5秒后弹窗‘);

    }

  },1000);


1

2

3

4

5

6

7

8

9

10

11

12

13

14

// 一般使用超时调用来模拟间隔调用是一种最佳模式;

// 因为使用间隔调用需要根据情况来取消ID,并且可能造成同步的一些问题;后一个间歇调用可能会在前一个间歇调用结束之前启动;

  var num = 0;

  var max = 5;

  function box(){

    num++;

    if(num == max){

      alert(‘5秒后弹窗‘);

    }else{

      setTimeout(box,1000);          // 隔1秒之后再次执行一个超时调用;

    }

  };

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

  // PS:在使用超时调用时,没必要跟踪超时调用ID,因为每次执行之后,如果不再设置另一个超时调用,调用就会自动停止;

时间: 2024-10-12 13:23:07

JavaScript 浏览器对象模型BOM的相关文章

Javascript浏览器对象模型BoM要点总结

BOM要点总结篇 温故而知心!!学到的东东,必须要总结一下,方便自己,巩固自己.今天我为大家总结一下BOM当中的一些要点: 一.Windows对象 1.窗口的操作 windows对象对操作浏览器窗口非常有用.用以下四种方法来实现对窗口的移动以及调整大小. moveBy(dx,dy)-----把浏览器窗口相对当前位置水平移动dx个像素,垂直移动dy个像素.dx值为负数,向左移动窗口,dy为负数,向上移动窗口. moveTo(x,y)-----移动窗口,使他的左上角位于用户的(x,y)处.可以使用负

JavaScript浏览器对象模型(BOM)

1 window对象 既是通过JS访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象. 1.1 全局作用域 全局变量不能通过delete删除,但是直接在window对象上的定义的属性可以 var age = 29; window.color = "red"; delete window.age; // 在IE<9时抛出错误,其他浏览器中返回false delete window.color; // 在IE<9时抛出错误,其他浏览器中返回true ale

浏览器对象模型BOM小结

概念 BOM (Browser Object Model) 浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C, BOM最初是Netscape浏览器标准的一部分: window对象 是浏览器中的Global对象 窗口设置 (打开.大小.位置) 间歇调用与超时调用 对话框 (提示框.确认框.输入框) location对象

ExtJS浏览器对象模型BOM——命名空间和用户代理对象、Cookie

BOM(浏览器对象模型(BrowserObjectModel)),允许访问和操控浏览器窗口.研发者通过使用BOM,可移动窗口.更改状态栏文本.执行其它不与页面内容发生直接联系的操作. 本文将从ExtJS中以下四类服务入手: 1,命名空间 2,用户代理对象 3,Cookie 4,定时调用函数(将于下一博文详细陈述) 命名空间   ExtJS的命名空间是在window对象所提供的全局范围内建立相互独立的范围,概念上类似于Java的package. Ext.namespace("com.baidu&q

JavaScript浏览器对象模型(BOM)之window对象

一.BOM概述 BOM(Browser Object Model)浏览器对象模型,它提供了很多对象,用于访问浏览器的功能. BOM 缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准.所以,BOM 本身是没有标准的或者还没有哪个组织去标准它. BOM 的核心对象是 window,它表示浏览器的一个实例.window 对象处于 JavaScript 结构的最顶层,对于每个打开的窗口,系统都会自动为其定义 window 对象. 二.Window对象的属性和方法的概括

JavaScript小白教程7浏览器对象模型 BOM

JavaScript Window - 浏览器对象模型 Window 对象 所有浏览器都支持 window 对象.它表示浏览器窗口.页面就是一个窗口 所有 JavaScript 全局对象.函数以及变量均自动成为 window 对象的成员. 全局变量是 window 对象的属性. 全局函数是 window 对象的方法. Window 尺寸(窗口的大小:长宽) 其他 Window 方法 一些其他方法: window.open() - 打开新窗口 window.close() - 关闭当前窗口 win

浏览器对象模型BOM总结

BOM是Browser Object Model的缩写,简称浏览器对象模型.BOM提供了独立于内容而与浏览器窗口进行交互的对象  · 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window  · BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性. BOM提供了一些访问窗口对象的一些方法,:1.我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率.BOM最强大的功能是它提供了一个访

004_01浏览器对象模型BOM

BOM:Browser Object Model,是指浏览器对象模型,用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,它表示浏览器的一个实例,其他对象都是该对象的子对象. 主要功能: 1. 弹出新浏览器窗口的能力: 2. 移动.关闭和更改浏览器窗口大小的能力: 3. 可提供WEB浏览器详细信息的导航对象: 4.可提供浏览器载入页面详细信息的本地对象: 5

浏览器对象模型--BOM

BOM的核心对象是window对象,其他对象都是window对象的子对象 一.浏览器对象模型 二.window对象 属性 1.位置类型 (浏览器距离屏幕的距离) // IE chrome alert(window.screenLeft) alert(window.screenTop) // FF chrome alert(window.screenX) alert(window.screenY) 2.尺寸类型 (浏览器的文档尺寸) alert(window.innerWidth) //(有兼容性