# javascript快速入门13--BOM——浏览器对象模型(Browser Object Model) ## 什么是BOM？ * BOM是Browser Object Model的缩写，简称浏览器对象模型 * BOM提供了独立于内容而与浏览器窗口进行交互的对象 * 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window * BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性 * BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C（WHATWG,WebHypertextApplicationTechnologyWorkingGroup——网页超文本应用程序技术工作组目前正在努力促进BOM的标准化） * BOM最初是Netscape浏览器标准的一部分 基本的BOM体系结构图  ## 能利用BOM做什么？ BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，以使得我们可以通过这个入口来使用DOM的强大功能！！！ window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象，例如下面两行代码是一样的： ``` document.write("BOM"); window.document.write("BOM"); ``` window -- window对象是BOM中所有对象的核心。window对象表示整个浏览器窗口，但不必表示其中包含的内容。此外，window还可用于移动或调整它表示的浏览器的大小，或者对它产生其他影响。 **JavaScript中的任何一个全局函数或变量都是window的属性** window子对象 * document 对象 * frames 对象 * history 对象 * location 对象 * navigator 对象 * screen 对象 window对象关系属性 * parent：如果当前窗口为frame，指向包含该frame的窗口的frame （frame） * self ：指向当前的window对象，与window同意。 （window对象） * top ：如果当前窗口为frame，指向包含该frame的top-level的window对象 * window ：指向当前的window对象，与self同意。 * opener ：当窗口是用javascript打开时，指向打开它的那人窗口（开启者） window对象定位属性 * IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置，但未提供任何判断窗口大小的方法。用document.body.offsetWidth和document.body. offsetHeight属性可以获取视口的大小（显示HTML页的区域），但它们不是标准属性。 * Mozilla提供window.screenX和window.screenY属性判断窗口的位置。它还提供了window.innerWidth和window.innerHeight属性来判断视口的大小，window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小。 ### window对象的方法 窗体控制 moveBy(x,y)——从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体 moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点，当使用负数做为参数时会吧窗体移出屏幕的可视区域 resizeBy(w,h)——相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体 resizeTo(w,h)——把窗体宽度调整为w个像素，高度调整为h个像素 窗体滚动轴控制 scrollTo(x,y)——在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置 scrollBy(x,y)—— 如果有滚动条，将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素)，将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素) 窗体焦点控制 focus()—— 使窗体或控件获取焦点 blur()——与focus函数相反，使窗体或控件失去焦点 新建窗体 open()——打开(弹出)一个新的窗体 close()——关闭窗体 opener属性——新建窗体中对父窗体的引用，中文"开启者"的意思 window.open方法语法 ``` window.open(url, name, features, replace); ``` open方法参数说明 * url -- 要载入窗体的URL * name -- 新建窗体的名称(目标,将在a 标签的target属性中用到，当与已有窗体名称相同时将覆盖窗体内容).open函数默认的打开窗体的方式为target的_blank弹出方式，因此页面都将以弹出的方式打开 * features -- 代表窗体特性的字符串，字符串中每个特性使用逗号分隔 * replace -- 一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数通常不用指定 open函数features参数说明,如果不使用第三个参数，将打开一个新的普通窗口 | 参数名称 | 类型 | 说明 | | --- | --- | --- | | height | Number | 设置窗体的高度，不能小于100 | | left | Number | 说明创建窗体的左坐标，不能为负值 | | location | Boolean | 窗体是否显示地址栏，默认值为no | | resizable | Boolean | 窗体是否允许通过拖动边线调整大小，默认值为no | | scrollbars | Boolean | 窗体中内部超出窗口可视范围时是否允许拖动，默认值为no | | toolbar | Boolean | 窗体是否显示工具栏，默认值为no | | top | Number | 说明创建窗体的上坐标，不能为负值 | | status | Boolean | 窗体是否显示状态栏，默认值为no | | width | Number | 创建窗体的宽度，不能小于100 | 　 **特性字符串中的每个特性使用逗号分隔，每个特性之间不允许有空格** open方法返回值为一个新窗体的window对象的引用 对话框 alert(str)—— 弹出消息对话框（对话框中有一个“确定”按钮） confirm(str)—— 弹出消息对话框（对话框中包含一个“确定”按钮与“取消”按钮） prompt(str,defaultValue)——弹出消息对话框（对话框中包含一个“确定”按钮、“取消”按钮与一个文本输入框），由于各个浏览器实现的不同，若没有第二个参数（文本框中的默认值）时也最好提供一个空字符串 状态栏 window.defaultStatus 属性——改变浏览器状态栏的默认显示(当状态栏没有其它显示时)，浏览器底部的区域称为状态栏，用于向用户显示信息 window.status 属性——临时改变浏览器状态栏的显示 时间等待与间隔函数 setTimeout()—— 暂停指定的毫秒数后执行指定的代码 clearTimeout()——取消指定的setTimeout函数将要执行的代码 setInterval()——间隔指定的毫秒数不停地执行指定的代码 clearInterval()——取消指定的setInterval函数将要执行的代码 setTimeout与setInterval方法有两个参数，第一个参数可以为字符串形式的代码，也可以是函数引用，第二个参数为间隔毫秒数,它们的返回是一个可用于对应clear方法的数字ID ``` var tid = setTimeout("alert('1')",1000); alert(tid); clearTimeout(tid); ``` ### History对象,在浏览器历史记录中导航 History 对象的属性:length 返回浏览器历史列表中的 URL 数量 History 对象的方法 * back() 加载 history 列表中的前一个 URL * forward() 加载 history 列表中的下一个 URL * go(num) 加载 history 列表中的某个具体页面 ### Location 对象 Location 对象的属性 * hash 设置或返回从井号 (#) 开始的 URL（锚） * host 设置或返回主机名和当前 URL 的端口号 * hostname 设置或返回当前 URL 的主机名 * href 设置或返回完整的 URL * pathname 设置或返回当前 URL 的路径部分 * port 设置或返回当前 URL 的端口号 * protocol 设置或返回当前 URL 的协议 * search 设置或返回从问号 (?) 开始的 URL（查询部分） Location 对象的方法 * assign() 加载新的文档,这与直接将一个URL赋值给Location对象的href属性效果是一样的 * reload() 重新加载当前文档，如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。 * replace() 用新的文档替换当前文档，replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前纪录。 ### Navigator对象 Navigator 对象的属性 * appCodeName 返回浏览器的代码名 * appName 返回浏览器的名称 * appVersion 返回浏览器的平台和版本信息 * browserLanguage 返回当前浏览器的语言 * cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值 * cpuClass 返回浏览器系统的 CPU 等级 * onLine 返回指明系统是否处于脱机模式的布尔值 * platform 返回运行浏览器的操作系统平台 * systemLanguage 返回 OS 使用的默认语言 * userAgent 返回由客户机发送服务器的 user-agent 头部的值 * userLanguage 返回 OS 的自然语言设置 ## 框架与多窗口通信 ### 子窗口与父窗口 只有自身和使用window.open方法打开的窗口和才能被JavaScript访问,window.open方法打开的窗口通过window.opener属性来访问父窗口。 而在opener窗口中，可以通过window.open方法的返回值来访问打开的窗口！ ### 框架 window.frames集合：在框架集或包含iframe标签的页面中，frames集合包含了对有框架中窗口的引用 ``` alert(frames.length);//框架的数目 alert(frames[0].document.body.innerHTML);//使用下标直接获取对框架中窗口的引用 //不但可以使用下标，还可以使用frame标签的name属性 alert(frames["frame1"].document.title); ``` 在框架集中还可以使用ID来获取子窗口的引用 ``` var frame1 =document.getElementById("frame1");//这样只是获取了标签 var frame1Win = frame1.contentWindow;//frame对象的contentWindow包含了窗口的引用 //还可以直接获取框架中document的引用 var frameDoc = frame1.contentDocument; alert(frameDoc);//但IE不支持contentDocument属性 ``` ### 子窗口访问父窗口——window对象的parent属性 ### 子窗口访问顶层——window对象的top属性 ## 浏览器检测 市场上的浏览器种类多的不计其数，它们的解释引擎各不相同，期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时候，然而开发者不能干等着那天。历史上已经有不少方法来解决浏览器兼容问题了，主要分为两种：1.userAgent字符串检测，2.对象检测；当然，也不能考虑所有的浏览器，我们需要按照客户需求来，如果可以确信浏览网站的用户都使用或大部分使用IE浏览器，那么你大可放心的使用IE专有的那些丰富的扩展，当然，一旦用户开始转向另一个浏览，那么痛苦的日子便开始了。下面是市场上的主流浏览器列表： * Internet Explorer * Mozilla Firefox * Google Chrome * Opera * Safari 注意，浏览器总是不断更新，我们不但要为多种浏览器作兼容处理，还要对同一浏览器多个版本作兼容处理。比如IE浏览器，其6.0版本和7.0版本都很流行，因为微软IE随着操作系统绑定安装（之前也是同步发行，微软平均每两年推出一款个人桌面，同样IE也每两年更新一次；直到现在，由于火狐的流行，IE工作组才加快IE的更新），所以更新的较慢，6.0版和7.0版有很大差别。 市场上还存在一些其它浏览器，但由于它们都是使用的上面所列浏览器的核心，或与上面浏览器使用了相同的解释引擎，所以无需多作考虑。下面是主流的浏览器解释引擎列表： 1. Trident Trident （又称为MSHTML），是微软的窗口操作系统（Windows）搭载的网页浏览器—Internet Explorer的排版引擎的名称，它的第一个版本随着1997年10月Internet Explorer第四版释出，之后不断的加入新的技术并随着新版本的Internet Explorer释出。在未来最新的Internet Explorer第七版中，微软将对Trident排版引擎做了的重大的变动，除了加入新的技术之外，并增加对网页标准的支持。尽管这些变动已经在相当大的程度上落后了其它的排版引擎。使用该引擎的主要浏览器：IE，TheWorld，MiniIE，Maxthon，腾讯TT浏览器。事实上，这些浏览器是直接使用了IE核心，因为其userAgent字符串中返回的信息与IE是一模一样的！ 2. Gecko 壁虎，英文为"Gecko"。Gecko是由Mozilla基金会开发的布局引擎的名字。它原本叫作NGLayout。Gecko的作用是读取诸如HTML、CSS、XUL和JavaScript等的网页内容，并呈现到用户屏幕或打印出来。Gecko已经被许多应用程序所使用，包括若干浏览器，例如Firefox、Mozilla Suite、Camino,Seamonkey等等 3. Presto Presto是一个由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。Presto取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。Presto在推出后不断有更新版本推出，使不少错误得以修正，以及阅读Javascript效能得以最佳化，并成为速度最快的引擎。 4. KHTML 是HTML网页排版引擎之一，由KDE所开发。KDE系统自KDE2版起，在档案及网页浏览器使用了KHTML引擎。该引擎以C++编程语言所写，并以LGPL授权，支援大多数网页浏览标准。由于微软的Internet Explorer的占有率相当高，不少以FrontPage制作的网页均包含只有IE才能读取的非标准语法，为了使KHTML引擎可呈现的网页达到最多，部分IE专属的语法也一并支援。目前使用KHTML的浏览器有Safari和Google Chrome。而KHTML也产生了许多衍生品，如：WebKit,WebCore引擎 ### 利用userAgent检测 下面是各大浏览器使用弹窗显示的userAgent字符串 IE浏览器：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)  火狐浏览器：Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4  Opera浏览器：Opera/9.64 (Windows NT 5.1; U; Edition IBIS; zh-cn) Presto/2.1.1  Safari浏览器：Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16  Google Chrome浏览器：Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/530.5 (KHTML, like Gecko) Chrome/2.0.172.33 Safari/530.5  可以使用下面的代码进行浏览器检测 ``` var Browser = { isIE:navigator.userAgent.indexOf("MSIE")!=-1, isFF:navigator.userAgent.indexOf("Firefox")!=-1, isOpera:navigator.userAgent.indexOf("Opera")!=-1, isSafari:navigator.userAgent.indexOf("Safari")!=-1 }; ``` 但这样做并不是万无一失的，一个特例便是Opera可以使用userAgent伪装自己。下面是伪装成IE的userAgent：Mozilla/5.0 (Windows NT 5.1; U; Edition IBIS; zh-cn; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.64；在完全伪装的情况下，最后的“Opera 9.64”这个字符串也不会出现，但Opera也有特殊的识别自身的方法，它会自动声明一个opera全局变量！ 不但如此，我们的检测还忽略了一点，就是那些使用相同引擎而品牌不同的浏览器，所以，直接检测浏览器是没有必要的，检测浏览器的解释引擎才是有必要的！ ``` var Browser = { isIE:navigator.userAgent.indexOf("MSIE")>-1 && !window.opera, isGecko:navigator.userAgent.indexOf("Gecko")>-1 && !window.opera && navigator.userAgent.indexOf("KHTML") ==-1, isKHTML:navigator.userAgent.indexOf("KHTML")>-1, isOpera:navigator.userAgent.indexOf("Opera")>-1 }; ```