Window对象

Window对象介绍

window对象表示浏览器中打开的窗口。其document属性指向窗口中载入的DOM文档。

javascript的所有对象都存在一个运行环境之中，这个运行环境本身也是对象，成为“顶层对象”。同时，javascript的所有对象都是“顶层对象”的下属。不同的运行环境中有不同的“顶层对象”，在浏览器环境中就是window对象。

所有浏览器环境的全局变量，都是window对象的属性。

每个标签都有自己的window对象，如果文档包含框架（iframe标签），浏览器会为HTML文档创建一个window对象，并为每个框架创建一个额外的window对象。

Window对象属性

GlobalEventHandlers

window上挂载的全局事件处理包含了例如onclick、onabord等一些常见的接口，处理相应的事件回调。

screenX和screenY

返回浏览器窗口左上角相对于屏幕左上角（0，0）的水平距离和垂直距离，单位为像素。

innerHeight和innerWidth

返回窗口的文档显示区的高度和宽度（包含水平和垂直滚动条）。

任何窗口对象，如window,frame,frameset,secondary window都支持innerHeight属性。

// 返回视口的宽度和高度
var intFrameHeight = window.innerHeight; 
var intFrameWidth = window.innerWidth;


var intFrameHeight = self.innerHeight;
// 返回frameset里面的frame视口的高度

var intFramesetHeight = parent.innerHeight;
// 返回上一级frameset的视口的高度

var intOuterFramesetHeight = top.innerHeight;
// 返回最外部frameset的视口的高度

outerHeight和outerWidth

获得整个浏览器窗口的高度和宽度（包含侧边栏等）。

任何窗口对象，如window,frame,frameset,secondary window都支持innerHeight属性。

outer和inner的区别

pageXOffset,pageYOffset

设置或返回当前页面相对于窗口显示区左上角的X或Y位置。 相当于scrollX和scrollY

// 如果滑动到页面下方，恢复到左上角
if (window.scrollY > 400) {
  window.scroll(0,0);
}

closed

返回一个布尔值，表示窗口是否已经被关闭。

当浏览器窗口关闭时，该窗口的windows对象并不会消失，会继续存在，不过它的closed属性将设置为true。

myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")

name

返回存放窗口的名称的一个字符串。

该名称是由open()方法创建窗口时制定的或使用<frame>标记的name属性指定的。

myWindow=window.open('','MyName','width=200,height=100')
myWindow.name

tips: 各个浏览器对这个值的储存容量有所不同，但是一般来说，可以高达几MB。该属性只能保存字符串，且当浏览器窗口关闭后，所保存的值就会消失。因此局限性比较大，但是与iframe窗口通信时，非常有用。

opener

opener属性是一个可读写的属性，可返回对创建该窗口的Window对象的引用。

如果当前窗口没有父窗口，则返回null

opener属性非常有用，创建的窗口可以引用创建它的窗口所定义的属性和函数。

myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus()
myWindow.opener.document.write("This is the parent window")

self

返回对当前窗口的只读引用，等价于Window属性。

top

返回最顶层的先辈窗口。

该属性返回对一个顶级窗口的只读引用，如果窗口本身就是一个顶级窗口，则存放对窗口自身的引用。

window.top应用

parent

返回当前窗口的父窗口对象。

如果一个窗口没有父窗口，则返回它本身的引用。

if (window.parent != window.top) {
  // 至少有三层窗口
}

frameElement

返回嵌入当前window对象的元素（例如iframe等），如果当前的window对象已经是顶层窗口，则返回null。

var frameEl = window.frameElement;
// 如果当前窗口被包含在一个框架里面,则将该框架的地址跳到'http://mozilla.org/'
if (frameEl)
  frameEl.src = 'http://mozilla.org/';

frames

frames是一个对象集合，返回窗口中所有命名的框架。

该集合是Window对象的数组，每个Window对象在窗口中含有一个框架或<iframe>，其中frames.length存放数组中含有的元素个数。

可以根据window.frames['someName']直接控制name的值。

var frames = window.frames; 
for (var i = 0; i < frames.length; i++) { 
  frames[i].document.body.style.display = "none";
}

实践地址

length

返回当前窗口中包含的框架数量（包括frame和iframe两种元素）

window.frames.length === window.length // true

点我参观iframe

screen

返回一个screen对象的引用，包含有关客户端显示屏幕的信息。 没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象。

具体内容等介绍到screen对象时再详细说明。

navigator

返回一个navigator对象的引用，可以用它来查询一些关于当前脚本的应用程序的相关信息。

没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。

具体内容等介绍到navigator对象时再详细说明。详情参考navigator对象

console.log(window.navigator.appName);

document

指向该窗口的文档节点，对document对象的只读引用。

具体内容等介绍到document对象时再详细说明。详情参考document对象

var doc = window.document;
alert( doc.title);

history

对history对象的只读引用。提供了对浏览器会话历史的相关接口。

具体内容等介绍到history对象时再详细说明。详情参考history对象

var his = window.history;
his.back();

location

只读属性，返回一个Location对象，包含文档当前地址的相关信息。

尽管是一个只读属性，仍然可以通过赋值进行路由跳转。

具体内容等介绍到location对象时再详细说明。详情参考location对象

console.log(window.location);

Window对象方法

alert()

alert()方法用于显示带有一条制定消息和一个OK按钮的警告框。

这里显示的对话框是一个模态窗口,它能阻止用户对浏览器窗口界面的其他部位进行操作,你不应该过多的使用这种模态窗口.

alert("我是一个警告信息" + "\n" + "我有折行比较高端")

confirm()

confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。

在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

var r=confirm("我是alert的哥哥")
  if (r==true)
    {
    document.write("yeah!")
    }
  else
    {
    document.write("Nope!")
    }

prompt()

prompt() 方法用于显示可提示用户进行输入的对话框。

可以传递两个参数，text表示对用户显示的纯文本，defaultText表示默认的输入文本。

如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。

var name=prompt("Please enter your name","")
  if (name!=null && name!="")
    {
    document.write("Hello " + name + "!")
    }

blur()

blur() 方法可以把键盘焦点从顶层窗口移开。

focus()

focus() 把键盘焦点给予一个窗口。

close()

close() 关闭当前窗口或某个指定的窗口。

var openedWindow;

function openWindow()
{
  openedWindow = window.open('moreinfo.htm');
}
function closeOpenedWindow()
{
  openedWindow.close();
}

moveBy()

moveBy()方法可相对窗口的当前坐标把它移动指定的像素。

window.moveBy(x,y)

x和y为将窗口右移和下移的像素数，可以为负数。

myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.moveBy(50,50)
myWindow.focus()

moveTo()

可以将窗口的左上角移动到一个指定的坐标。

用法同上。

open()

open()方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

window.open(URL,name,features,replace)

字段含义：

URL：一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name：一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和<form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么open()方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features将被忽略。
features：一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。
replace：一个可选的布尔值。规定了装载到新窗口的URL是创建一个新条目，还是替换浏览历史中的当前条目。

window.open(
"http://www.w3school.com.cn",
"_blank",
"toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400"
)

扩展：

窗口风格有以下选项，这些选项可以多选，如果多选，各选项之间用逗号分隔：

toolbar：指定窗口是否有标准工具栏。当该选项的值为1或yes时，表示有标准工具栏，当该选项的值为0或no时，表示没有标准工具栏；
location：指定窗口是否有地址工具栏，选项的值及含义与toolbar相同；
directories：指定窗口是否有链接工具栏，选项的值及含义与toolbar相同；
status：指定窗口是否有状态栏，选项的值及含义与toolbar相同；
menubar：指定窗口是否有菜单，选项的值及含义与toolbar相同；
scrollbar：指定当前窗口文档大于窗口时是否有滚动条，选项的值及含义与toolbar相同；
resizable：指定窗口是否可改变大小，选项的值及含义与toolbar相同；
width：以像素为单位指定窗口的宽度，已被innerWidth取代；
height：以像素为单位指定窗口的高度，已被innerHeight取代；
outerWidth：以像素为单位指定窗口的外部宽度；
outerHeight：以像素为单位指定窗口的外部高度；
left：以像素为单位指定窗口距屏幕左边的位置；
top：以像素为单位指定窗口距屏幕顶端的位置；
alwaysLowered：指定窗口隐藏在所有窗口之后，选项的值及含义与toolbar相同；
alwaysRaised：指定窗口浮在所有窗口之上，选项的值及含义与toolbar相同；
dependent：指定打开的窗口为当前窗口的一个子窗口，并随着父窗口的关闭而关闭，选项- 的值及含义与toolbar相同；
hotkeys：在没有菜单栏的新窗口中设置安全退出的热键，选项的值及含义与toolbar相同；
innerHeight：设定窗口中文档的像素高度；
innerWidth：设定窗口中文档的像素宽度；
screenX：设定窗口距离屏幕左边界的像素长度；
screenY：设定窗口距离屏幕上边界的像素长度；
titleBar：指明标题栏是否在新窗口中可见，选项的值及含义与toolbar相同；
z-look：指明当窗口被激活时，不能浮在其它窗口之上，选项的值及含义与toolbar相同。

open方法返回的是该窗口的引用。小技巧：该方法经常用于在打开一个网页时自动打开另一个窗口。

print()

print()方法用于打印当前窗口的内容。其实就是相当于点击浏览器的打印按钮。产生一个对话框。

window.print()

resizeBy()

resizeBy()方法用于根据指定的像素来调整窗口的大小。

window.resizeBy(-100,-100)

resizeTo()

resizeTo()方法用于把窗口大小调整为指定的宽度和高度。

window.resizeTo(500,300)

scrollBy()

scrollBy()方法可内容滚动指定的像素数。

window.scrollBy(100,100)

setTimeout()

setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。

setTimeout(code,millisec)

setTimeout只执行code一次，如果需要多次调用，请使用setInterval或者让code自身再次调用setTimeout

setTimeout("alert('5 seconds!')",5000)

setInterval()

setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

var int=self.setInterval("clock()",1000)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }

跳转链接

atob()

WindowBase64.atob()函数用来解码一个被base-64编码过的数据。同时可以用btoa()进行编码。

window.atob(window.btoa("hello world")) === "hello world"

getComputedStyle()

该方法得出所有在应用有效的样式和分解任何可能会包含之的基础计算后的元素的CSS属性值。

getComputedStyle 返回的对象跟 element 调用 style 属性返回的对象是同一种类型，可以称为 CSSStyleDeclaration. 但两个对象有不同的用处， getComplutedSytle返回的对象是只读对象，用于检测元素的样式（包括在<style> 和外部的样式，即浏览器计算后的样式）。 elt.style 对象用于设置元素上的内联样式.

var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);

// 它等价于
// var style = document.defaultView.getComputedStyle(elem1, null);

getSelection()

返回用户选择的文本，这是一个Selection对象。如果想转换为字符串的话，可以使用toString()方法。

var selObj = window.getSelection(); 
    alert(selObj);