BOM 窗体相关属性以及页面可见区域的获取方式

1 在IE Safari Oper Chrome 都提供了screenLeft和screenTop属性：
　　screenLeft : 相对于屏幕左边的距离
　　screenTop : 相对于屏幕上边的距离

　　Firefox则在 screenX, screenY属性中提供形同的窗口位置信息，Safari,Chrome同样也支持这两个属性。Oper虽然支持但是两个属性表现不一致， 尽量避免在Oper中使用screenTop和screentLeft

     兼容各种浏览器可以使用这种方式：

　　　　var leftPos = (typeof window.screenLeft=="number")？window.screenLeft:window.screenX;

　　　　var topPos = (typeof window.screenTop=="number")？window.screenTop:window.screenY;

 　　注意： IE,Oper中 scrrenLeft与screenTop 表示的是屏幕左边和上边到Window对象表示的页面可见区域的距离。换句话说，如果window对象是最外层对象，而且浏览器是紧贴屏幕最上端-----即y轴坐标为0，那么ScreenTop的值就是位于页面可见区域上方的浏览器工具栏的像素高度；

　　　　　　Safari Firefox Chrome中 screenTop或screenY保存的是浏览器窗体相对于屏幕的坐标值,即在窗口的y轴左边为0时返回0

2 关于窗体移动的两个函数：　

　moveTo，moveBy 都接收两个参数，前者接收新位置的x和y坐标值    后者接收的是水平和垂直方向的移动量

　　moveTo(0,0)将窗体移动到屏幕的左上角

　　moveBy(0,100)将窗体往下移动100px 

　注意：这两个函数可能会被浏览器禁用；而且在Oper和IE7（更高的版本）中默认是禁用的。另外这两个方法不适用于框架，只适合于最外层的window对象使用。　　

3 窗体大小

　　IE9+ Firefox Safari Opera 和 Chrome 均为此提供了四个属性： innerWidth,innerHeight,outerWidth,outerHeight.

　　在各个浏览器的表现不一样：

　　　　IE9+ Firefox Safari Opera 中 outerWidth outerHeight返回浏览器窗口本身的尺寸（无论丛那个window对象还是从某个框架访问）。

　　　　特殊情况在Chrome中 outerWidth 与innerWidth 相等，既视口（vierport）大小而非浏览器窗口的大少;

4 在IE8之前没有提供取得当前浏览器窗口大小的方法，不过dom提供了获取页面可见区域的相关信息。

　　在IE Firefox Safari Opera 和 Chrome中，document.documentElement.clientWidth 和 document.documentElement.clientHeight中保存了页面视口的信息。

　 　　注意：IE6中标准模式才有用，在混杂模式，就必须通过document.body.clientWidth和 document.body.clientHeight取得相同信息。

　　　 在混杂模式下的Chrome中 无论事document.documentElement 与 document.body 中的ClientWidth与ClientHeight属性，都可以取得视口的大小。

虽然最终无法确定浏览器窗口本身大小，但却可以取得页面视口的大小，如下所示。

　　var pageWidth = window.innerWidth;

　　　　pageHeight = window.innerHeight;

　　if(typeof pageWidth != "number"){

　　　　if(document.compatMode == "CSSCompat"){ // document.compatMode 标准模式

　　　　　　pageWidth = document.documentElement.clientWidth;

　　　　　　pageHeight = document.documentElement.clientHeight;

　　　　 }else{

　　　　　　pageWidth = document.body.clientWidth;

　　　　　　pageHeight = document.body.clientHeight;

　　　　}

　　}

在移动设备上，window.innerHeight,window.innerWidth保存着可见视口，即屏幕可见区域的大小。在移动IE浏览器是不支持innerHeight与innerWidth，不过可以通过document.documentElement.clientWidht与document.documentElement.clientHeight取得相同的信息，随着页面缩放这些值也跟着变化。

在其他移动浏览器中，document.documentElement度量的是布局视口，即渲染后页面的实际大小（与可见视口不同，可见视口只是整个页面中的一小部分，通过调整页面）。移动IE浏览器把布局视口的信息保存在document.body.clentWidth和document.body.clientHeight中，这些值不会随着页面缩放变化。

 5 间歇调用和超时调用

　　JavaScript是单线程语言，但它允许通过设置超时时间和间歇时间值来调度代码在特定的时候执行。前者是在指定的时间过后执行代码，而后者则是每个制定时间就执行一次代码。

　　超时调用需要使用window对象的setTimeout()方法接收两个参数； @ID有一个返回值

　　　　第一个参数：执行代码　　第二个参数： 以毫秒表示的时间（即执行代码前需要等待多少毫秒）。第一个参数可以是一个包含JavaScript代码的字符串（就和在eval（）函数中使用字符串一样），也可以是一个函数。例如　　
　　　　

//不建议传递字符串

　　　　setTimeout("alert(‘Hello world‘)",1000);

　　　　//推荐的调用方式

　　　　setTimeout(function(){alert(‘Hello World!‘);},1000)

两种方式都一样可以弹出对话框，但是第一种方式可能影响性能的损失，因此不推荐使用字符串作为第一个参数。

　　函数不一定在第二个参数指定的时间执行，这是为什么尼？　

　　由于JavaScript是一个单线程的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，就有一个JavaScirpt任务队列。这些任务会按照加入队列顺序执行。setTimeout（）的第二个参数告诉JavaScirpt再过多长时间执行当前任务添加到队列。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

　　那怎么来移除setTimeout尼？

　　调用setTimeout()之后，该 方法会返回一个数值ID,表示超时调用。这个超时调用ID是计划执行代码的唯一标识符，可以通过它来取消超时调用。要取消尚未执行的超时调用计划，可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它，如下

//设置超时调用

　　var timeoutId= setTimeout(function(){
　　　　alert("hello world");　　

　　},1000);

　　//注意：把它取消

　　clearTimeout(timeoutId);

　　间歇调用使用setInterval() 工作模式和超时调用模式类似；一般项目中很少使用这种方式。

6 系统对话框

　　浏览器通过alert()，confirm()和prompt()方法可以调用系统对话框向用户显示消息。

　　(1) 系统对话框与在浏览器中显示的网页没有关系，也不包含HTML。

　　(2) 它们外观由操作系统及浏览器设置决定，而不是由CSS决定。

　　(3) 通过这几个方法打开的对话都是同步和模态的。也就是说，显示这些对话框的时候代码回停止执行，而关掉这些对话框又会恢复执行。

7  location对象

　　提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

　　location即使window对象属性，也是document对象的属性；换句话说，window.location和document.location引用的是同一个对象。

　　用处： location对象的用处不只是表现在它保存着当前文档的信息，还表现在它将url解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。下列列出location对象所以属性

　　Location接口表示其关联的对象所展示的页面的地址等信息，对该对象的修改会反映到关联的对象上。Document 和 Window 接口都有一个关联的Location，可以分别用Document.location和Window.location来访问它们对应的Location。

属性

href

包含整个URL的一个DOMString

protocol

包含URL对应协议的一个DOMString，最后有一个":"。

host

包含了域名的一个DOMString，可能在该串最后带有一个":"并跟上URL的端口号。

hostname

包含URL域名的一个DOMString。

port

包含端口号的一个DOMString。

pathname

包含URL中路径部分的一个DOMString，开头有一个“/"。

search

 包含URL参数的一个DOMString，开头有一个“?”。

hash

包含块标识符的DOMString，开头有一个“#”。

username

包含URL中域名前的用户名的一个DOMString。

password

包含URL域名前的密码的一个 DOMString。

origin 只读

包含页面来源的域名的标准形式DOMString。

方法

Location没有继承任何方法，但实现了来自URLUtils的方法。

Location.assign()

加载给定URL的内容资源到这个Location对象所关联的对象上。

Location.reload()

重新加载来自当前 URL的资源。他有一个特殊的可选参数，类型为 Boolean，该参数为true时会导致该方法引发的刷新一定会从服务器上加载数据。如果是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。

Location.replace()

用给定的URL替换掉当前的资源。与 assign() 方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面。

URLUtils.toString()

返回一个DOMString，包含整个URL。 它和读取URLUtils.href的效果相同。但是用它是不能够修改Location的值的。

BOM 窗体相关属性以及页面可见区域的获取方式

原文：http://www.cnblogs.com/czhyuwj/p/5126026.html