标签：path   toc   开头   像素   opera   传递   content   cli   his   

1、窗口位置

用来确定和修改window对象位置的属性和方法有很多。IE、Safari、Opera和Chrome都提供了screenLeft和screenTop属性，分别用于表示窗口相对于屏幕左边和上边的位置。FireFox则在screenX和screenY属性中提供相同的窗口位置信息，Safari和Chrome也同时支持者两个属性。跨浏览器取得窗口左边和上边的位置代码：

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

移动窗口

//将窗口移动到屏幕左上角
window.moveTo(0,0);

//将窗口向下移动100像素 
window.moveBy(0,100);

//将窗口移动到（200,300）
window.moveTo(200,300);

//将窗口想左移动50像素
window.moveBy(-50,0);

2、窗口大小

IE9+、FireFox、Safari、Opera、Chrome均为此提供了4个属性：innerWidth、innerHeight、outerWidth和outerHeight。

在IE9+、Safari和FireFox中，outerWidth和outerHeight返回浏览器本身的尺寸。在Opera中，这两个属性的值表示页面视图容器的大小，而innerWidth和innerHeight则表示该容器中页面视图区的大小（减去边框宽度）。在Chrome中，outerWidth、outerHeight与innerWidth和innerHeight返回相同的值，即视口大小而非浏览器窗口大小。

在主流浏览器中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息。

在IE6中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过document.body.clientWidth和document.body.clientHeight取得相同信息。

取得页面视口的大小代码：

var pageWidth = window.innerWidth,
      pageHeight = window.innerHeight;

if(typeof pageWidth != "number"){
    
       if(document.compatMode == "CSS1Compat"){
                pageWidth = document.documentElement.clientWidht;
                pageHeight = document.documentElement.clientHeight;
        }else{
                pageWidht = document.body.clientWidht;
                pageHeight = docuemnt.body.clientHeight;
         }
}

另外，使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。

//调整到100X100
window.resizeTo(100,100);

//调整到200X150
window.resizeBy(100,50);

//调整到300X300
window.resizeTo(300,300);

3、导航和打开窗口

使用window.open()打开窗口既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。

这个方法可以接收4个参数：要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

如果为window.open()传递了第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或者框架中加载第一个参数指定的URL

//等同于<a href="http"//www.wrof.com" target="topFrame"></a>
window.open("http://www.wrox.com/","topFrame");

调用这行代码，就如同用户单击了href属性为http://www.wrox.com/，target属性为“topFrame”的链接。如果有一个名叫“topFrame”的窗口或者框架，就会在该窗口或框架加载这个URL；否则，就会创建一个新窗口并将其命名为‘topFrame’。此外，第二个参数也可以是下列任何一个特殊的窗口名称：_self、_parent、_top或_blank

4、系统对话框

第一种最常用：

alert("Hello World!");     通常使用alert()生成警告

第二种：confirm()方法生成；除了确认对话框外，还有一个取消按钮；

例如：confirm("Are you sure?");   

confirm()方法会返回布尔值：true表示单击了OK，false表示单击了cancel或者单击了右上角的X按钮

第三种：prompt()方法生成，为一个提示框，用于提示用户输入一些文本。提示框中除了显示OK和Cancel按钮之外，还会显示一个文本输入框，以供用户在其中输入内容。prompt()方法接受两个参数：要显示给用户的文本提示和文本输入域的默认值（可以是一个空字符串）

例如：prompt("What‘s your name?","Michael")

如果用户单击了OK按钮，则prompt()返回文本输入框的值；如果用户单击了Cancel或没有单击OK而是通过其他方式关闭了对话框，则该方法返回null

5、location对象

window.location和document.location引用的是同一个对象

改变位置

使用location对象可以通过很多方式来改变浏览器的位置。首先，也是为常用的方式，就是使用assign()方法并为其传递一个URL

location.assign("http://www.wrox.com");

如果是将location.href或者window.location设置为一个URL的值，也会以该值调用assign()方法。例如：

window.location = "http://www.wrox.com";

location.href = "http://www.wrox.com";

最常用的是设置location.href属性。

6、history对象

1、go()方法：可以在用户的历史记录中任意跳转，可以向后也可以向前。这个方法接受一个参数，表示向前后者向后跳转的页面数一个整数值。负数表示向后跳转（类似于单击浏览器的“后退”按钮），正数表示向前跳转（类似于单击浏览器的“前进”按钮）

2、back()和forword()可以模拟浏览器的后退和前进按钮

3、length属性，保存着历史记录的数量

history.go(-1);     //后退一页
history.go(1);      //前进一页
history.go(2);      //前进2页

history.go("wrox.com");   //跳转到最近的wrox.com

history.back();    //后退一页
history.forword(); //前进一页

BOM

标签：path   toc   开头   像素   opera   传递   content   cli   his   

原文地址：http://www.cnblogs.com/deerfig/p/7275247.html