JS高级程序设计——BOM

来源：互联网发布：双三次插值算法编辑：程序博客网时间：2024/05/19 01:12

window 对象

全局作用域

所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
虽然有上述说法，但是定义全局变量与在window对象上直接定义属性还是有一点差别：全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以。因为用var语句添加的window属性有一个[[Configurable]]的特性，值被设置为false。
尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。

窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。
每个window对象都有一个name属性，包含框架的名字。
除非最高层窗口是通过window.open()打开的，否则其在window对象的name属性不会包含任何值。
top对象始终指向最高（外）层的框架，也就是浏览器窗口。
parent对象始终指向当前框架的直接上层框架。在没有框架的时候，parent==top。
self对象始终指向window。

<html>    <head>    </head>    <frameset rows="100,*">        <frame src="frame.htm" name="topFrame">//window.name=topFrame        <frameset cols="50%,50%">            <frame src="anotherframe.htm" name="leftFrame">            //可由window.frames[1]、window.frames["leftFrame"]、top.frames[1]、top.frames["leftFrame"]、frames[1]、frames["leftFrame"]来引用            <frame src="anotherframeset.htm" name="rightFrame">//这个框架包含了下述的框架集        </frameset>    </frameset></html><frameset cols="50%,50%">    <frame src="red.htm" name="redFrame">//parent.name=rightFrame    <frame src="blue.htm" name="blueFrame"></frameset>

窗口位置

确定位置：

screenLeft、screenTop属性：IE、Safari、Opera、Chrome

screenX、screenY属性：Firefox

var leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX;var topPos=(typeof window.screenTop=="number")?window.screenTop:window.screenY;

精确移动位置
- moveTo()接收的是新位置的x、y坐标值。
- moveBy()接收的是向右、下移动的像素数。
- 这两个方法都不适用于框架，只能对最外层的window对象使用。

窗口大小

确定大小
- outerWidth和outerHeight在IE9、Safairi和Firefox中返回浏览器本身的尺寸。在Opera中，这两个属性表示页面视图容器的大小，而innerWidth和innerHeight则表示该容器页面视图区的大小（减去边框宽度），在Chrome中，返回相同的值。
- IE、在Opera、Chrome、Safairi和Firefox中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息，在IE6中，这些在标准模式下才有效，如果是混杂模式，就必须通过document.body.clientWidth和document.body.clientHeight属性。
```
var pageWidth=window.innerWidth;var pageHeight=window.innerHeight;if(typeof pageWidth!="number"){    if(document.compatMode=="CSS1Compat"){        pageWidth=document.documentElement.clientWidth;        pageHeight=document.documentElement.clientHeight;    }//标准模式下    else{        pageWidth=document.body.clientWidth;        pageHeight=document.body.clientHeight;    }//混乱模式下}
```
调整大小
- resizeTo()接收浏览器窗口的新宽度和新高度。
- resizeBy()接收新窗口与原窗口的宽度和高度之差。
- 这两个方法都不适用于框架，只能对最外层的window对象使用。

导航和打开窗口

window.open()使用
- window.open(要加载的URL，窗口目标，一个特性字符串，表示新页面是否取代浏览器历史记录中当前加载页面的布尔值)。
- 该方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。返回指向新窗口的引用。
- 通常只需传递第一个参数。
- 如果传递了第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数URL。
- 如果第二个参数并不存在，则会根据第三个参数创建一个新窗口或者新标签页，如果没有第三个参数，则默认打开一个新浏览器窗口。
- 第三个参数是以逗号分隔的名值对。
有关
- 新创建的window对象有一个opener属性，保存着打开它的原始窗口对象。这个属性只在弹出窗口中的top层有定义。
- 如果需要浏览器在独立的进程中运行每个标签页，需要将新创建的opener属性设置为null，即表示在单独的进程中运行新标签页。

弹出窗口屏蔽程序

如果是浏览器内置的屏蔽程序阻止的弹出窗口，那么window.open()很可能会返回null；如果是其他程序组织的，window.open()会抛出一个错误。

var blocked=false;try{    var wrox=window.open("http://www.wrox.com","_blank");    if(wrox==null){        blocked=true;    }}catch(ex){    blocked=true;}//try catch 表示当try中语句抛出错误时执行catchif(blocked){    alert("the popup was blocked");}

间歇调用和超时调用

超时调用
- 表示在指定的时间过后执行代码。
- setTimeout(要执行的代码，等待时间)
- 第一个参数因为可能导致性能损失，所以建议函数。
- 第二个参数表示过多长时间把当前任务添加到任务队列中，如果队列为空则立即执行，如果不为空，则需等待。
- setTimeout()的返回值，是超时调用ID，是计划执行代码的唯一标识符，可以将它传给clearTimeout()来取消尚未执行的超时调用计划。
```
var timeID=setTimeout(function(){    alert("hello");},1000);clearTimeout(timeID);
```
间歇调用
- 表示每隔一段时间执行一次代码。
- setInterval()
- 使用与上述差不多。
- 可以使用clearInterval(timeID)来取消。
使用超时调用来模拟间歇调用是一种最佳模式。

系统对话框

alert()：警告对话框，包含传入的字符串和确定按钮。
confirm()：确认对话框，还显示了取消按钮。点击确定返回true，否则返回false。
prompt()：提示框，用于提示用户输入一些文本，会显示一个文本输入框。接收两个参数：要显示给用户的文本提示和文本输入域的默认值（可为空）。会返回用户输入的值，如果没有输入，则返回null。
如果当前脚本在执行过程中会打开2个或2个以上的对话框，从第2个开始之后会显示一个复选框，以便用户组织后续的对话框显示，除非用户刷新页面。

location对象

提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
既是window对象的属性，也是document对象的属性。
它还将URL解析为独立的片段，可以通过不同的属性访问这些片段。
location对象的所有属性：
hash:返回#后跟0或多个字符，”#contents”
host:返回服务器名称和端口号，”www.wrox.com:80”
hostname:返回不带端口号的服务器名称，”www.wrox.com”
href:返回完整的URL，tostring()方法也返回这个，”http:/www.wrox.com”
port:返回端口号，如果没有返回空字符串，”8080”
pathname:返回URL中的目录和文件名，”/WileyCDA”
protocol:返回页面使用的协议，”http:”
search:返回URL的查询字符串，以问号开头，”?q=javascript” 名值对

查询字符串

下面这个函数可以解析查询字符串，返回一个包含所有名值对的对象。

function getsearch(){    var qs=(location.search.length>0?location.search.substring(1):"");    args={};    items=qs.length?qs.split("&"):[];    item=null;    name=null;    value=null;    for(var i=0;i<items.length;i++){        item=items[i].split("=");        name=decodeURLComponent(item[0]);//因为查询字符串应该是被编码过的，所以需要解码        value=decodeURLComponent(item[1]);        if(name.length){            args[name]=value;        }    }    return args;}//假设查询的字符串是?q=javascript&num=10var args=getsearch();alert(args["q"]);//javascriptalert(args["num"]);//10

位置操作

通过一些方式来改变浏览器的位置

location.assign(“URL”);//打开新URL并生成一条历史纪录。
window.location=”URL”等同于location.href=”URL”等同于上述。
location.hash=”#section1”；//更改hash部分
location.search
location.hostname
location.pathname
location.port
以上方式都相同，且都会在历史纪录中生成一条新纪录。
如果不想生成新记录，可以使用replace(“URL”)方法,这样之后用户是不能通过“后退”来回到前一个页面。
reload()重新加载页面，位于这之后的代码可能不会执行，所以最好这行代码放到最后。

location.reload();//有可能从缓存中加载location.reload(true);//从服务器重新加载

navigator对象

是识别客户端浏览器的事实标准。navigator对象的属性通常用于检测显示网页的浏览器类型。

检测插件

非IE的浏览器使用plugins数组。数组中的每一项都包含四个属性：name（插件的名字），description（插件的描述），filename（插件的文件名），length（插件所处理的MIME类型数量）。

function hasPlugin(name){    name=name.toLowerCase();//转入小写形式便于比较    for(var i=0;i<navigator.plugins.length;i++){        if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){            return true;        }    }    return false;}alert(hasPlugin("Flash"));

对于IE浏览器，只能使用ActiveObject类型，并尝试创建一个特定插件的实例，要想检测特定的插件，就必须知道其COM标识符。比如，Flash的标识符是ShockwaveFlash.ShockwaveFlash。

function hasIEPlugin(name){    try{        new ActiveObject(name);        return true;    }catch(ex){        return false;    }}alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));

典型的做法是针对每个插件分别创建检测函数，而不是使用前面的通用检测方法。

function hasFlash(){    var result=hasPlugin("Flash");    if(!result){        result=hasIEPlugin("ShockwaveFlash.ShockwaveFlash");    }    return result;}alert(hasFlash());

plugins集合有一个名叫refresh()的方法，用于刷新plugins以反映最新安装的插件，参数为布尔值，true表示重新加载页面，更新集合；flase表示不加载页面，只更新集合。

注册处理程序

可以让一个站点指明它可以处理特定类型的信息

registerContentHandle();接收三个参数：要处理的MIME类型，可以处理该MIME类型的页面URL，应用程序的名称。
registerProtocolHandler();接收三个参数：要处理的协议，处理该协议的页面URL，应用程序的名称。

screen对象

表明客户端的能力，包括浏览器窗口外部的显示器的信息，如像素宽度和高度等

history对象

该对象保存着用户上网的历史纪录，从窗口被打开的那一刻算起

因为history是window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的history。
go()方法

history.go(1);//前进一页history.go(2);//前进2页history.go(-1);//后退1页history.go("wrox.com");//跳转到历史纪录中最近的包含wrox.com字符串的第一个位置

back()和forward()后退和前进一页
history.length()保存着历史纪录的数量

阅读全文

1 0