www.baike369.com
百科369 > JS教程 > JavaScript窗口与框架(Window对象)

JavaScript窗口与框架(Window对象)



JavaScript窗口与框架(Window对象)

窗口操作是JavaScript中一个很重要的操作。所谓窗口是指浏览器窗口,也是通常所说的Window对象。Window对象描述的是浏览器窗口或者显示文档的框架,该对象是JavaScript对象层次的顶层对象。使用HTML中的frameset元素可以在一个窗口中使用多个框架,框架是窗口的一个重要组成部分。


JavaScript Window对象

Window对象是一个全局对象、是所有对象的顶级对象,在JavaScript中有着举足轻重的作用。Window对象作为对象的一种,也有着自己的方法和属性。

JavaScript Window对象介绍

Window对象代表的是打开的浏览器窗口。

JavaScript Window对象的使用方法

作为一个对象,Window对象也有着自己的方法和属性。

JavaScript Window对象的属性

Window对象中的属性比较多,这些属性大多都是浏览器窗口中所特有的属性,并且是不可移植的。

JavaScript Window对象的方法

除了属性之外,Window对象还拥有很多方法。

JavaScript Window对象的事件

除了方法和属性之外,Window对象还支持下表中的事件:事件名说明 blur 当窗口失去焦点时激发的事件。


JavaScript Window对象事件

常用的Window对象的事件包括blur、error、focus、load、move、resize和unload七种。通过这7种事件,可以在浏览器窗口装载与卸载文档、得到与失去焦点、移动和调整窗口大小、执行代码出错时执行特定的程序等。

JavaScript加载文档

Window对象中的load事件通常作用在body元素中,也可以作用在img元素中。

JavaScript卸载文档

与load事件相反,unload事件是在浏览器窗口卸载文档时所激发的事件。

JavaScript得到焦点与失去焦点

当浏览器窗口得到焦点时可以触发focus事件,所谓得到焦点是指浏览器窗口为当前的活动窗口。

JavaScript调整窗口大小

当浏览器窗口大小被调整时,将会触发resize事件。

JavaScript错误处理

Window对象中有一个可以用来处理错误信息的事件(error),这是一个十分特殊的事件。


JavaScript对话框

Window对象中的对话框是响应用户某种需求而弹出的小窗口。有3种常用的对话框,分别为警告框、确认框和提示框。

JavaScript警告框(alert()方法)

使用Window对象的alert()方法可以在浏览器窗口上弹出一个警告框,并且警告框里可以显示纯文本的文字。

JavaScript确认框(confirm()方法)

Window对象的confirm()方法会弹出一个问题信息,即确认框。

JavaScript使用confirm()方法作为判断语句的判断条件

confirm()方法返回一个布尔(Boolean)值。

JavaScript alert()方法与confirm()方法的使用

在JavaScript中,可以通过一个函数同时执行alert()方法与confirm()方法。

JavaScript提示框(prompt()方法)

使用Window对象的prompt()方法可以在浏览器窗口中弹出一个提示框。

JavaScript中prompt()方法的使用

prompt()方法可以作为条件判断语句的判断条件来使用。


JavaScript状态栏

状态栏位于浏览器底部,用于向用户显示信息。Window对象中的defaultStatus属性和status属性可以控制状态栏中的信息。

JavaScript状态栏介绍

状态栏位于浏览器底部,用于向用户显示信息。

JavaScript默认状态栏信息

通常情况下,状态栏里的信息都是空的,只有在加载网页或将鼠标放在超链接上时,状态栏中才会显示这些瞬间信息。

JavaScript状态栏瞬间信息

Window对象的status属性可以设置状态栏的瞬间信息。


JavaScript窗口操作

窗口操作是Window对象中使用得比较多的操作之一,主要包括新开窗口、关闭窗口、窗口聚焦、滚动窗口、移动窗口和调整窗口大小等操作。

JavaScript Window对象的open()方法

使用Window对象的open()方法可以打开一个新的浏览器窗口。

JavaScript打开一个新空白窗口(open()方法)

在JavaScript中,新开一个空白浏览器窗口,是window.open()方法中的一个最简单的运用。

JavaScript打开一个有文档的新窗口(open()方法)

在JavaScript中,只要在window.open()方法中设置url参数即可新开一个包含文档的窗口。

JavaScript打开一个新命名窗口(open()方法)

在window.open()方法中设置windowName参数可以为新开的窗口命名。

JavaScript使用open()方法打开一个带滚动条的窗口

在JavaScript中,使用window对象的open()方法可以打开一个带滚动条的窗口。

JavaScript使用链接和按钮实现窗口打开的open()方法

可以有很多种方法来创建窗口。最常用的是使用链接或按钮来实现。实例下面的示例分别使用链接和按钮实现了在新窗口中打开Web页的功能。

JavaScript使用open()方法和close()方法打开和关闭窗口

打开一个窗口后,可以使用close()方法将其关闭。

JavaScript设置新打开窗口的特征

在JavaScript中,使用window.open()方法可以通过设置features参数来设置新开窗口的特征。

JavaScript在新建的窗口中动态写入HTML代码

在JavaScript中,可以在新创建的窗口中动态写入HTML代码,浏览器会识别这些代码,并将其结果显示出来。

JavaScript一个窗口写入的应用示例

下面的示例是用窗口写入技术改写的。

JavaScript使用DOM方法修改新窗口中的HTML代码

在JavaScript中,使用DOM语句,可以随心所欲地改变新文档中的HTMML代码。

JavaScript设置在浏览器上显示浏览过的历史记录

在JavaScript中,使用window.open()方法中的replace参数可以用来设置在浏览器上显示浏览过的历史记录。

JavaScript设置新打开窗口的名称

使用JavaScript的window.open()方法可以设置新开窗口的名称,该窗口名称在a元素和form元素的target属性中使用。

JavaScript关闭自身窗口(close()方法)

使用JavaScript的window.close()方法关闭的浏览器窗口就是关闭自身窗口。

JavaScript关闭由JavaScript代码创建的自身窗口(close()方法)

对于在使用JavaScript代码打开的窗口中使用window.close()方法来关闭窗口,大多数浏览器都不会弹出提示对话框。

JavaScript关闭其它浏览器窗口(close()方法)

使用JavaScript的window.close()方法不但可以关闭当前浏览器窗口,也可以关闭其它浏览器窗口。

JavaScript判断浏览器窗口是否关闭

如果仔细阅读了“JavaScript关闭其它浏览器窗口”这篇文章。

JavaScript使用close()方法安全关闭窗口

在JavaScript中,使用close()方法可以安全地关闭由open()方法打开的窗口。

JavaScript一个窗口写入的简单示例

窗口创建以后,可以使用标准的document.write()方法对其进行写入。

JavaScript在新打开的窗口中输入文字

使用window.open()方法可以弹出一个新窗口,并返回一个Window对象,该Window对象代表了新开的浏览器窗口。

JavaScript在新打开的窗口中调试JavaScript代码

JavaScript在新开窗口中输入文字的使用过程中,还有另外一个比较普遍的运用,就是调试JavaScript代码。

JavaScript操作新打开的子窗口中的数据

由于JavaScript的window.open()方法可以返回一个Window对象,因此可以通过该Window对象来操作新开的子窗口中的数据。

JavaScript父级窗口的引用

使用window.open()方法返回的是子窗口的Window对象的引用。

JavaScript窗口聚焦——让浏览器窗口得到和失去焦点

所谓窗口聚焦,就是将输入焦点赋给窗口,也就是平时所说的激活窗口,或让窗口成为当前窗口,此时可以在该窗口中进行鼠标或键盘操作。

JavaScript窗口特征属性综合示例

窗口特征参数相当丰富,可以控制窗口的宽度、高度、滚动条以及其它窗口特征等。

JavaScript使用scrollBy()方法和scrollTo()方法滚动窗口

Window对象中有3个方法可以用来滚动窗口中的文档。

JavaScript移动浏览器窗口

在Window对象中可以使用下面两个方法来移动浏览器窗口:其中:moveTo()方法可以将窗口移动到一个绝对位置上。

JavaScript使用moveTo()方法和moveBy()方法移动窗口

在JavaScript中。

JavaScript调整浏览器窗口大小

在Window对象中使用下面的两个方法可以调整浏览器窗口的大小:其中:resizeTo()方法可以将窗口调整到一个绝对大小。

JavaScript使用resizeBy()方法和resizeTo()方法改变窗口大小

在JavaScript中。

JavaScript Window对象进行窗口方法测试

在JavaScript中。


JavaScript超时与时间间隔

Window对象中有一些方法可以用来设置代码的执行时间和执行方式,例如在某个指定的时间执行代码或让代码周期执行等。

JavaScript延迟执行代码(setTimeout()方法)

在JavaScript程序中,除了函数是需要调用时才执行的代码之外,所有代码都是在浏览器读取代码时立刻执行的。

JavaScript周期性执行代码(setInterval()方法)

setTimeout()方法只能让代码在延迟一定时间后执行,并不能让代码反复执行。

JavaScript停止周期性执行代码(clearInterval()方法)

使用setInterval()方法可以周期性执行代码,但是只有在少数情况下才需要将代码一直执行下去。

JavaScript取消延迟执行的代码(clearTimeout()方法)

Window对象中的clearTimeout()方法可以取消延迟执行的代码。

JavaScript设置窗口时间与超时设定

Window对象支持一些设置计时器的方法,用于执行特定函数。


JavaScript框架操作

HTML中的frameset元素可以创建框架。框架是一种特殊的窗口。虽然在很多时候都把框架称为Frame对象,但是事实上,在JavaScript中并不存在Frame对象。所谓的Frame对象只是Window对象的一个实例,该对象拥有Window对象的所有方法、属性和事件等。

JavaScript框架介绍

框架可以在同一个浏览器窗口里打开多个网页,并且这些网页之间并不是独立的,网页与网页之间的信息可以有相互的联系。

JavaScript框架(Frame)的公用属性

在XHTML和JavaScript中。

JavaScript使用框架

使用框架时,主要的难点就是保持框架间名称与关联的清晰,以保证这些框架能够被正确引用。

JavaScript框架的数量

在Window对象中有一个frames属性,该属性是个数组,数组中的元素代表着框架中所包含的窗口。

JavaScript框架中的父窗口与子窗口

框架中的窗口与窗口之间并不是没有联系的,比如“JavaScript框架介绍”文章中的“Frame.html的框架层次图”就是框架页中窗口与窗口之间的关系。

JavaScript框架中的各个窗口之间的关系

在框架中,除了在父窗口中可以引用子窗口之外,JavaScript还允许在子窗口中引用父窗口,以及在几个子窗口中互相引用。

JavaScript框架中使用窗口的名字引用窗口

在使用HTML代码创建一个框架时。

JavaScript内联框架

内联框架,又称嵌入式框架,使用<iframe>标签来标识。

JavaScript框架交叉通信的方法

如果有两个框架,那么,可以在第一个框架内建立一个窗体,来给用户提供一个输入表达式的字段,结果则显示在另一个框架的窗体内。

JavaScript嵌套框架交叉通信的方法

对于嵌套的框架,交叉框架通信更为复杂。

JavaScript装入框架用于同时打开多个不同的网页

XHTML提供了一个目标属性,用于装入单一框架。

JavaScript用框架进行状态管理

在JavaScript中,框架一个很有用的特征是可以在多个页面中保存其状态信息。


JavaScript中Window对象的子对象

JavaScript中Window对象的子对象

Window对象是BOM模型中的顶层对象,因此所有BOM模型中的对象都是该对象的子对象。

Copyright© 2011-2016 www.baike369.com All Rights Reserved