第8章 BOM

115 阅读3分钟

BOM的核心:window对象,是浏览器的一个实例。它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的global对象。下面讲的对象都是window的属性。

定义在全局作用域和直接定义在window对象上的区别是:定义在全局的不能用delete操作符删除。

尝试访问未声明的变量会出错,但如果是一个对象的属性则可以:

var name=a; //a未声明,报错
var name1=window.a;//undefinde,可以。

窗口关系及框架

每个框架都有自己的windows对象,并保存在frames集合中,每个windows对象都有name属性。

window.frames[0]\window.frames["topName"]

top对象始终指向最外层框架,也就是浏览器窗口。

parent表示包含当前框架的外部框架,self则回指window,可以混合用。

可以将不同层次的window对象串连起来:window.parent.parent.frames[0]

窗口位置

screenLeft、screenTop属性

screenX、screenY属性

moveTo()、moveBy()

窗口大小

resizeTo()、resizeBy()

导航和打开窗口

window.open() //返回窗口

window.close()

var baidu=window.open("http://baidu.com","hhh","height:400,width:400");var b=false;try{    if(baidu==null){        b=true;    }}catch(ex){    b=true;}if(b){    alert("窗口被屏蔽了")}baidu.moveTo(200,200);baidu.resizeTo(500,500);

✔间歇调用和超时调用

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

  • setTimeout():超时调用。接受参数:要执行的代码和时间毫秒数。第一个参数可以是JavaScript代码的字符串(不建议,性能损失),也可以是函数。返回一个数字ID,可以通过它来取消超时调用。取消方法为clearTimeout,未执行前取消才有效果。

var id=setTimeout(() => {    alert("ni")}, 2000); //两秒之后把当前任务添加到队列中
clearTimeout(id);

第二个参数表示时间毫秒数,但是到了这个时间代码不一定执行。由于JavaScript是单线程的解释器,因此一段时间只能执行一段代码,为了控制要执行的代码,就有一个JavaScript任务队列,第二个参数就是告诉JavaScript多长时间后把当前任务添加到队列中。如果队列是空的则会马上执行。

  • setInterval():间歇调用。接受的参数和setTimeout()相同。同样返回ID,用clearInterval()取消间歇调用。

var a= setInterval(function(){    alert("nihao")},3000)clearInterval(a);

var max=5;var num=0;function run(){    num++;    if(num<=max){        setTimeout(run,2000);    }    else{        alert(num);    }}setTimeout(run,2000);console.log(num);for(var i=0;i<2;i++){    setTimeout(function(){alert("bb")},2000)}

可以用setTimeout()代替间歇调用。因为间歇调用后面如果还有间歇调用,有可能会导致后面的先执行。要用递归函数,用循环不能控制。

系统对话框

显示对话框,代码会停止,所以现在一般使用模态框。

location对象

P207表格。

表格中任意改变都会引起历史记录改变。

  • location.href属性打开网页,和window.location一个功能。系统会自动调用location.assign()。
  • relaod()重新加载页面。
  • replace()跳转页面,但是不会新增历史记录,只会替代原来的。

navigator对象

通常用于检测网页显示的浏览器类型,如注册的插件。

screen对象

关于显示器,不常用。

history对象

可以用go()、forward()、back()来控制历史记录

还有一个length属性,保存着历史记录的数量。