javaScript--浏览器对象模型BOM(17)

// BOM也叫做浏览器对象模型,它提供了很多对象,用于访问浏览器的功能;这些功能与任何网页内容无关;

// BOM缺少规范,每个浏览器提供商都按照自己的想法去扩展它,那么浏览器共有对象就成了事实的标准;

一 window对象

1 // BOM的核心对象是window,它表示浏览器的一个实例;2 // window对象处于Javascript结构的最顶层;3 // 对于每个打开的窗口,系统都会自动为其定义window对象;4 // window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局作用域中声明的变量/函数都会变成window对象的属性和方法;5 // PS:尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的对象是否存在;6     var newValue = oldValue;                // =>ReferenceError:oldValue is not defined;7     var newValue = window.oldValue;         // =>undefined;

1.window对象的属性和方法

// window对象有一系列的属性,这些属性本身也是对象;

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

 1 (2).方法 2 alert(text)                                        创建一个警告对话框,显示一条信息; 3 blur()                                             将焦点从窗口移除; 4 clearInterval(interval)                            清除之前设置的定时器间隔; 5 clearTimeOut(timer)                                清除之前设置的超时; 6 close()                                            关闭窗口; 7 confirm()                                          创建一个需要用于确认的对话框; 8 focus()                                            将焦点移至窗口; 9 open(url,name,[options])                           打开一个新窗口并返回新window对象;10 PRompt(text,defaultInput)                          创建一个对话框要求用户输入信息;11 scroll(x,y)                                        在窗口中滚动到一个像素点的位置;12 setInterval(expression,milliseconds)               经过指定时间间隔计算一个表达式;13 setInterval(function,millisenconds,[arguments])    经过指定时间间隔后调用一个函数;14 setTimeout(expression,milliseconds)    　　　　　　　在定时器超过后计算一个表达式;15 steTimeout(function,milliseconds,[arguments])      在定时器超过后调用一个函数;16 print()                                            调出打印对话框;17 find()                                             调出查找对话框;18 // window下的属性和方法,可以使用window.属性、window.方法()或者直接属性、方法()的调用;19 // window.alert(text)=alert(text);

2.系统对话框

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

 1 // 弹出警告 2     alert('警告'); 3  4 // 确认和取消 5     if(confirm('请确定或取消'){                    // confirm()本身有返回值; 6         alert('您选择了确定');                     // 按确定,返回true值; 7     })else{ 8         alert('您选择了取消');                     // 按取消,返回false值; 9     }10 11 // 输入提示框12     var num = prompt('请输入一个数字',0);          // 第一个参数是文字提示;第二个参数是输入框模式填充值;并返回输入框中的值;13     alert(num);                                  // 将prompt()方法返回的值赋给变量num;并弹出;14 15 // 调用打印及查找对话框16     print();                                     // 打印; 弹出浏览器打印窗口;17     find();                                      // =>boolean;页面有匹配的查找内容返回true;相对于Ctrl+F;18 19 // 状态栏20     defaultStatus = '状态栏默认文本';              // 浏览器底部状态栏初始默认值;21     status = '状态栏文本';                        // 浏览器底部状态栏设置值;

3.新建窗口(open())

 1 // 使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口; 2 // 它接收四个参数: 3 // (1).要加载的URL; 4 // (2).窗口的名称或窗口目标; 5 // (3).一个特定字符串; 6 // (4).一个表示新页面是否取代浏览器记录中当前加载页面的布尔值; 7     open('www.baidu.com');                        // Chrome-search://local-ntp/www.baidu.com;打开失败;需要添加http://; 8     open('http://www.baidu.com');                 // 新建页面并跳转到百度; 9     open('http://www.baidu.com','搜索引擎');       // 新建页面 打开百度页面 并命名窗口;并不会自动跳转;并且再次调用时只是刷新那个页面;10     open('http://www.baidu.com','_parent');       // 在本页面打开百度;'_blank'是指定新页面打开;11 // 第三个字符串参数12 设置             值                 说明13 width          数值           新窗口的宽度,不小于100px;14 height         数值           新窗口的高度,不小于100px;15 top            数值           新窗口的Y坐标,不能是负值;16 left           数值           新窗口的X坐标,不能是负值;17 location     boolean         是否在浏览器窗口中显示地址栏;不同浏览器默认值不同;18 menubar      boolean         是否在浏览器窗口显示菜单栏,默认为no;19 resizable    boolean         是否通过拖动浏览器窗口边框来改变大小;默认no;20 scrollbars   boolean         如果页面内容显示不下,是否显示滚动条;默认no;21 status       boolean         是否在浏览器窗口中显示状态栏,默认no;22 toolbar      boolean         是否在浏览器中显示工具栏;默认no;23 fullscreen   boolean         浏览器窗口是否最大化;仅IE支持;24     open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200,toolbar=yes');25 26 // open()本身返回window对象27     var box = open();                            // 返回了一个window对象,打开了一个新空白页面;28     box.alert('');                               // 然后指定在open()返回的对象打开的新页面弹窗;29 30 // 字窗口操作父窗口31     document.onclick = function(){　　　　　　　　 // 在新的窗口中点击docuement对象;32         opener.document.write('子窗口让我输出的!');// 此时在产生它的父窗口会生成文字内容;33     }

4.窗口的位置和大小

 1 (1).窗口的位置 2 // 用来确定和修改window对象(浏览器窗口)相对于屏幕的位置: 3 // IE+Safari+Opera+Chrome都提供了screenLeft和screenTop属性, 4 // Firefox提供了screenX和screeY属性; 5 // 他们分别表示窗口看相对于屏幕左边和上边的位置; 6      7 // 确定窗口的位置=>IE 8     alert(screenLeft);                            // 浏览器左侧离屏幕的距离; 9 // 确定窗口的位置=>Firefox10     alert(screenX);                               // 浏览器左侧离屏幕的距离;11 12 // 跨浏览器的方法13     var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;14     // 判断检测的screenLeft是否是数值,若是则使用screenLeft的值,否则使用screenX的值;

 1 (2).窗口的大小 2 // 检测浏览器窗口本身及边框的尺寸:outerWidth和outerHeight; 3     alert(outerWidth); 4     alert(outerHeight); 5 // 检测页面大小属性:innerWidth和innerHeight; 6     alert(innerWidth); 7     alert(innerHeight); 8 // PS:IE没有提供当前浏览器窗口尺寸的属性; 在DOM中有提供相关的方法; 9 10 // 在IE及其他浏览器中,提供了:document.documentElement.clientWidth和document.documentElement.clientHeight;来保存页面窗口的信息;11 // PS:在IE6中,上述属性在标准模式下才有效;如果是怪异模式,就必须通过document.body.clientWidth和document.body.clientHeight;12 // 如果是Firefox等浏览器,直接使用innerWidth和innerHeight;13     var width = window.innerWidth;                // 这里要加window,因为IE会无效;14     var height = window.innerHeight;15     if(typeof width != 'number'){                 // IE6浏览器16         if(document.compatMode == 'CSS1Compat'){  // 判断是IE6标准模式;使用documentElement;17             width = document.documentElement.clientWidth;18             height = document.documentElement.clientHeight;19         }else{                                    // 否则是IE6非标准模式;使用body;20             width = document.body.clientWidth;21             height = document.body.clientHeight;22         }23     }24     // PS:以上方法可以通过不同浏览器取得各自的浏览器窗口可视部分的大小;25     // document.compatMode可以确定页面是否处于标准模式;

1 // 调整浏览器位置;2     moveTo(0,0);                                  // 移动到(0,0)坐标;IE有效;3     moveBy(10,10);                                // 向下和向右分别移动10px;IE有效;4 5 // 调整浏览器大小6     resizeTo(200,200);                            // 调整大小;7     resizeBy(2