JavaScript中Window对象

前端 JavaScript
创建时间:
字数:2.3k 阅读: 评论:
  1. Window 对象
  2. Window 对象集合frames[]
  3. Window 对象属性
    1. closed
    2. document
    3. history
    4. location
    5. Navigator
    6. Screen
    7. name
    8. innerheight,innerwidth
    9. parent
    10. top
    11. opener
  4. Window 对象方法
    1. open()
      1. 窗口特征
    2. 其他方法
  5. 框架之间引用
  6. 参考链接

Window 对象

Window 对象表示浏览器中打开的窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

Window 对象集合frames[]

返回窗口中所有命名的框架。
该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 <iframe>。属性 frames.length 存放数组 frames[] 中含有的元素个数。注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。

<HTML>
<HEAD>
<TITLE>demo</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</HEAD>
  <frameset id ="_content" cols="178,*" bordercolor="#2CA6DA" BORDER = "0">
    <FRAME SRC="List.do" name="tree" noresize SCROLLING="auto" MARGINWIDTH=0 MARGINHEIGHT=0>
    <FRAME SRC="enterIn.do" name="main" noresize  SCROLLING="auto" MARGINWIDTH=0 MARGINHEIGHT=0>
  </frameset>
</HTML>
window.frames["main"]//获得main的window对象
window.frames["tree"]//获得tree的window对象

Window 对象属性

closed

closed 属性可返回一个布尔值，该值声明了窗口是否已经关闭。该属性为只读。
当浏览器窗口关闭时，表示该窗口的 Windows 对象并不会消失，它将继续存在，不过它的 closed 属性将设置为 true。

实例：检测窗口是否关闭

document

对 Document 对象的只读引用。请参阅 Document 对象。

history

对 History 对象的只读引用。请参数 History 对象。

location

用于窗口或框架的 Location 对象。请参阅 Location 对象。

对 Navigator 对象的只读引用。

Screen

对 Screen 对象的只读引用。

name

window.name属性用于设置当前浏览器窗口的名字。它有一个特点，就是浏览器刷新后，该属性保持不变。所以，可以把值存放在该属性内，然后跨页面、甚至跨域名使用。当然，这个值有可能被其他网站的页面改写。
该名称是在 open() 方法创建窗口时指定的或者使用一个 <frame> 标记的 name 属性指定的。
窗口的名称可以用作一个 <a> 或者 <form> 标记的 target 属性的值。以这种方式使用 target 属性声明了超链接文档或表单提交结果应该显示于指定的窗口或框架中。

window.name = "Hello World!";
console.log(window.name);

各个浏览器对这个值的储存容量有所不同，但是一般来说，可以高达几MB。

该属性只能保存字符串，且当浏览器窗口关闭后，所保存的值就会消失。因此局限性比较大，但是与iFrame窗口通信时，非常有用。

返回新窗口的名称,设置超链接文档显示于指定的窗口或框架中

innerheight,innerwidth

返回窗口的文档显示区的高度，宽度。
只读属性，声明了窗口的文档显示区的高度和宽度，以像素计。
这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。
IE 不支持这些属性。它用 document.documentElement 或 document.body （与 IE 的版本相关）的 clientWidth 和 clientHeight 属性作为替代。

var winHeight = 0;
var winWidth = 0;
//获取窗口宽度
if (window.innerWidth)
    winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
    winWidth = document.body.clientWidth;
//获取窗口高度
if (window.innerHeight)
    winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
    winHeight = document.body.clientHeight;
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
    winHeight = document.documentElement.clientHeight;
    winWidth = document.documentElement.clientWidth;
}
//Document.documentElement 是一个只读属性，返回文档对象（document）的根元素（例如，HTML文档的 <html> 元素）。
//返回当前文档中的<body>元素或者<frameset>元素.

parent

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

如果一个窗口没有父窗口,则它的 parent 属性为自身的引用.

top

top 属性返回最顶层的先辈窗口。

opener

opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。
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")//调用父窗口

Window 对象方法

open()

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

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

一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

  • true - URL 替换浏览历史中的当前条目。
  • false - URL 在浏览历史中创建新的条目。

窗口特征

channelmode=yes|no|1|0 是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0 是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels 窗口文档显示区的高度。以像素计。
left=pixels 窗口的 x 坐标。以像素计。
location=yes|no|1|0 是否显示地址字段。默认是 yes。
menubar=yes|no|1|0 是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。
status=yes|no|1|0 是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。
top=pixels 窗口的 y 坐标。
width=pixels 窗口的文档显示区的宽度。以像素计。

其他方法

方法 描述
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
blur() 把键盘焦点从顶层窗口移开。
focus() 把键盘焦点给予一个窗口。
close() 关闭浏览器窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
print() 打印当前窗口的内容。
prompt() 显示可提示用户输入的对话框。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。setTimeout() 只执行 code 一次
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

框架之间引用

要引用窗口中的一个框架，可以使用如下语法：

frame[i]        //当前窗口的框架
self.frame[i]    //当前窗口的框架
w.frame[i]    //窗口 w 的框架

要引用一个框架的父窗口（或父框架），可以使用下面的语法：

parent        //当前窗口的父窗口
self.parent    //当前窗口的父窗口
w.parent         //窗口 w 的父窗口

要从顶层窗口含有的任何一个框架中引用它，可以使用如下语法：

top        //当前框架的顶层窗口
self.top        //当前框架的顶层窗口
f.top        //框架 f 的顶层窗口

新的顶层浏览器窗口由方法 Window.open() 创建。当调用该方法时，应把 open() 调用的返回值存储在一个变量中，然后使用那个变量来引用新窗口。新窗口的 opener 属性反过来引用了打开它的那个窗口。

参考链接

http://www.w3school.com.cn/jsref/dom_obj_window.asp
http://javascript.ruanyifeng.com/bom/window.html

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 bin07280@qq.com

文章标题:JavaScript中Window对象

文章字数:2.3k

本文作者:Bin

发布时间:2016-03-17, 15:46:28

最后更新:2019-08-06, 00:52:26

原始链接:http://coolview.github.io/2016/03/17/JavaScript/JavaScript%E4%B8%ADWindow%E5%AF%B9%E8%B1%A1/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

©2016-2019 CoolView

Built with Hexo and 3-hexo theme

目录