您的位置：首页 > 其它

6框架、文档和窗口

2016-06-09 10:49 302 查看

框架

1FRAMESET标识符

利用FRAMESET标识符可将1个页面分成若干个框架，FRAMESET容器标识符有若干特性，其中2个基本特性是ROWS和COLS。如： <FRAMESET ROWS="35%,*">

frame标识符

在FRAMESET容器内，frame标识符用来确定在每个框架内应该显示哪个文件。文件的URL应该用SRC特性确定。这里相对的和绝对的指确定文件在html中的位置的2中不同方式。在绝对URL中，提供1个文件的完整路径。而相对URL值相对于当前文件的位置。

<FRAMESET rows="35%,*">

<frame src="menu.html">

<frame src="welcome.html">

</frameset>

frame对象(包括iframe)的属性和方法

name，表示帧的名字

frames，表示帧中所包含的帧组

document，表示帧中所显示的文档

length，表示帧中所包含的子帧的个数

parent，当前帧的上一级帧

self,表示当前帧

top，表示当前浏览器窗口中最顶层的帧

blur()，将当前帧放到所有其他窗口的后面

focus()，将当前帧放到所有其他窗口的签名

setTimeout,setInterval,clearTimeout,clearInterval

print()，显示打印对话框。

src，取值是URL字符串。

<FRAME>标记符的NORESIZE指出帧的大小不能改变。

self.name可以直接得到帧的名称,但是如果帧有id是不能通过self.id得到的。

命名框架

为了把链接或窗体提交的结果放到指定的窗口，可以用FRAME标识符的name特性给框架命名。

<frameset cols="50%,*">

<frame src="menu.html" name="menu">

<frame src="welcome.html" name="main">

</frameset>

可以用超文本引用利用target特性来捕捉main框架。如：

<A href="choice.html" target="main">

同样，窗体提交的结果也可以用相同的方式捕捉：

<form method=post action="" target="main">

IE7，IE8中，iframe的右边总是预留一块空白的滚动条位置，可以在iframe加载的页面的body中添加padding:0px;margin:0px;overflow:auto，就可以消除空白。

框架编程

一个HTML页面可以有一个或多个子框架，这些子框架以<iframe>来标记，用来显示一个独立的HTML页面。这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问，例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等。

框架间的互相引用

一个页面中的所有框架以集合的形式作为window对象的属性提供，例如：window.frames就表示该页面内所有框架的集合，这和表单对象、链接对象、图片对象等是类似的，不同的是，这些集合是document的属性。因此，要引用一个子框架，可以使用如下语法：

window.frames["frameName"];

window.frames.frameName

window.frames[index]

其中，window字样也可以用self代替或省略，假设frameName为页面中第一个框架，则以下的写法是等价的：

self.frames["frameName"]

self.frames[0]

frames[0]

frameName

每个框架都对应一个HTML页面，所以这个框架也是一个独立的浏览器窗口，它具有窗口的所有性质，所谓对框架的引用也就是对window对象的引用。有了这个window对象，就可以很方便地对其中的页面进行操作，例如使用window.document对象向页面写入数据、使用window.location属性来改变框架内的页面等。

下面分别介绍不同层次框架间的互相引用：

1．父框架到子框架的引用

知道了上述原理，从父框架引用子框架变的非常容易，即：

window.frames["frameName"];

这样就引用了页面内名为frameName的子框架。如果要引用子框架内的子框架，根据引用的框架实际就是window对象的性质，可以这样实现：

window.frames["frameName"].frames["frameName2"];

这样就引用到了二级子框架，以此类推，可以实现多层框架的引用。

2．子框架到父框架的引用

每个window对象都有一个parent属性，表示它的父框架。如果该框架已经是顶层框架，则window.parent还表示该框架本身。

3．兄弟框架间的引用

如果两个框架同为一个框架的子框架，它们称为兄弟框架，可以通过父框架来实现互相引用，例如一个页面包括2个子框架：

<frameset rows="50%,50%">

<frame src="1.html" name="frame1" />

<frame src="2.html" name="frame2" />

</frameset>

在frame1中可以使用如下语句来引用frame2：

self.parent.frames["frame2"];

4．不同层次框架间的互相引用

框架的层次是针对顶层框架而言的。当层次不同时，只要知道自己所在的层次以及另一个框架所在的层次和名字，利用框架引用的window对象性质，可以很容易地实现互相访问，例如：

self.parent.frames["childName"].frames["targetFrameName"];

5．对顶层框架的引用

和parent属性类似，window对象还有一个top属性。它表示对顶层框架的引用，这可以用来判断一个框架自身是否为顶层框架，例如：

//判断本框架是否为顶层框架

if(self==top){

//dosomething

}

改变框架的载入页面

对框架的引用就是对window对象的引用，利用window对象的location属性，可以改变框架的导航，例如：

window.frames[0].location="1.html";

这就将页面中第一个框架的页面重定向到1.html，利用这个性质，甚至可以使用一条链接来更新多个框架。

<frameset rows="50%,50%">

<frame src="1.html" name="frame1" />

<frame src="2.html" name="frame2" />

</frameset>



<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">link</a>



引用其他框架内的JavaScript变量和函数

在介绍引用其他框架内JavaScript变量和函数的技术之前，先来看以下代码：

<script language="JavaScript" type="text/javascript">



</script>

如果运行了这段代码，会弹出“hello,ajax!”的窗口，这正是执行hello()函数的结果。那为什么hello()变成了window对象的方法呢？因为在一个页面内定义的所有全局变量和全局函数都是作为window对象的成员。例如：

var a=1;

alert(window.a);

就会弹出对话框显示为1。同样的原理，在不同框架之间共享变量和函数，就是要通过window对象来调用。

例如：一个商品浏览页面由两个子框架组成，左侧表示商品分类的链接；当用户单击分类链接时，右侧显示相应的商品列表；用户可以单击商品旁的【购买】链接将商品加入购物车。

在这个例子中，可以利用左侧导航页面来存储用户希望购买的商品，因为当用户单击导航链接时，变化的是另外一个页面，即商品展示页面，而导航页面本身是不变的，因此其中的JavaScript变量不会丢失，可以用来存储全局数据。其实现原理如下：

假设左侧页面为link.html，右侧页面为show.html，页面结构如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title> New Document </title>

</head>

<frameset cols="20%,80%">

<frame src="link.html" name="link" />

<frame src="show.html" name="show" />

</frameset>

</html>

在show.html中展示的商品旁边可以加入这样一条语句：

<a href="void(0)" onclick="self.parent.link.addToOrders(32068)">加入购物车</a>

其中link表示导航框架，在link.html页面中定义了arrOrders数组来存储商品的id，函数addToOrders()用来响应商品旁边【购买】链接的单击事件，它接收的参数id表示商品的id，例子中是一个id为32068的商品：

<script language="JavaScript" type="text/javascript">



</script>

这样，在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。

框架可以使一个页面划分为功能独立的多个模块，每个模块之间彼此独立，但又可以通过window对象的引用来建立联系，是Web开发中的一个重要机制。

除了捕捉命名的框架外，还有若干特殊的项可用于target特性：

_blank，引起链接在新的未命名的窗口内加载。

_self，引起链接在被单击的窗口中加载。

_parent，引起的链接在framset的直接父窗口中加载。

_top，引起链接在全部窗口体内加载。

window.open()方法用来打开文档窗口:

window.open("http://www.baidu.com","_self");

在本窗口中打开。

2javascript中框架的使用

javascript提供了window对象的frames属性，以与脚本的不同框架一起工作。frames属性是一个对象数组，它在父框架集中为每一个子框架设有1项。框架的数目由length属性提供。也可以通过frame框架的名字来找到该框架，parent.frames["frame框架名称"]

例如：1个给定的窗口或框架集有2个框架,那么可以把这2个框架表示为parent.frames[0]和parent.frames[1]，最后一个框架的索引为parent.frames.length。

每一个框架有不同的document、location以及与它相对应的history对象。这是因为每个框架包含有各自的html文档，而且有各自的历史清单。例如：parent.frames[1].document.forms[0]来操做第二个子框架中的第一个表单。

<html>

<head>

<script language="javascript">



</script>

</head>

<body>

<input type="button" name="yunx" value="运行" onClick="yunxing()">

</body>

</html>

2document对象

document对象是在评估html页面内的body标识符时定义的，而且只要页面被加载，该对象就保持存在。

body标识符

body标识符定义html文档的主题，它的特性可使html编程者定义文本和链接的颜色以及文档的背景颜色或图案。有2个事件处理程序onLoad和onUnload可用于body标识符.

body标识符的特性：

BACKGROUND，确定背景图像到URL

BGCOLOR,以十六进制RGB三基色或颜色名确定文档的背景颜色。

FGCOLOR，以十六进制三基色确定前景的颜色。

LINK,以十六进制三基色确定链接的颜色。

ALINK，以十六进制三基色确定活动链接。

document对象的属性

alinkColor，以十六简直三基色表示活动连接颜色的RGB值。

anchors，与文档中每一个命名的锚所对应的对象数组。

bgColor,以十六简直三基色表示的背景颜色的RGB值。

cookies，包含当前文档的cookie值。

fgColor，表示以十六进制三基色表示的前景颜色的RGB值。

forms，与文档中每一个窗体对应的对象数组。

lastModified，包含修改文档的最后日期的字符串。

linkColor，以十六进制三基色表示的链接的RGB值。

links，与文档中每一个链接对应的对象数组。

location，定义文档的全部的URL的对象。

referrer，包含调用当前文档的URL。

title，包含文档标题的字符串。

froms[]属性,当文档中不止一个表单时，表单在document.forms[]属性以数组的形式存储。为了找出当前文档中有多少form对象，使用document.forms.length获得。

latModidied，表示文档对后修改的时间。

images[]，表示文档中所有图像的信息，每个图像都是这个数组的一个元素。

links[]，表示文档中所有超级连接信息。

document对象的方法

除了前面提到write()和writeln()方法外，document对象还提供其他3中方法：close()和clear()。

close()方法关闭要写入的文档窗口。

clear()方法清除当前的文档窗口。

document.getElementById("elementID")，按照ID找到文档中元素，返回该元素的引用。

document.getElementByName("elementName")，按照Name找到文档中元素，返回该元素的引用

document.all.元素名/ID，按照名字或ID找元素。

锚数组

虽然html的<A>标识符通常用来为其他文档定义超文本链接，它也可以用来定义文档中命名的锚，因此未能当内部的链接能偶跳到文档的其他地方。

例如：

<html>

<head>

<title>Anchors Example</title>

</head>

<body>

<A name="one">Anchor one is here

html code

<A name="two">Anchor two is here

more html code

<A href="#one">go back to anchor one</A><br>

<A href="#two">go back to anchor two</A><br>

</body>

</html>

javascript提供了将anchors数组作为访问与当前文档中锚有关的信息与方法的措施。数组中的每一个元素是anchor对象，而且与所有的数组一样，该数组有length属性。

Link对象

link对象从属于document对象，link对象是等同于<A>标记（当标记带有href属性时）。一个文档可以有任何数量的链接，因此链接的引用常通过数组索引方法来实现：

document.links
.propertyName

如:document.links[0].href="http://wwww.baidu.com"

当想通过点击一个链接来运行脚本而不是直接导航到另一个URL时，可以通过构造一个href属性来调用脚本函数。这个技术称为javascript:URL的伪URL。假如把函数名放在javascript:URL后面，那么脚本浏览器就会运行这个函数。链接中这种结构的语法形式如下：

<A href="javascript:void functionName([parameter1]...[parameterN])">...</A>

void关键词防止链接显示函数将返回的任何值。javascript:URL技术，它适用于所有包括href和src属性的标记。一个属性能偶接受URL作为它的值，它就能接收这个javascript:URL

location对象

location对象提供处理对象的位置的若干属性和方法。以下为属性和方法：

hash，锚名(在href特性的#符号后面的文本)

host，URL的主机名或端口

hostname，URL的主机名

href，全部URL作为一个字符串

pathname，文件路径(位于第三个斜杠后面的URL部分)

port，URL的端口。如果没有端口号，那么为空字符串。

protocol，URL的协议部分(如：http,gopher或ftp)

search，在URL中位于问好(?)后面的窗体数组或询问。

toString()，以字符串的形式返回location.href。

3window对象

document对象层次图的最高层是window对象。因为window对象的web浏览器所有内容的主容器。

创建窗口

open(URL,window_name[,window features])

产生新窗口的方法是window.open()，这个方法有三个参数用来定义窗口属性，比如要载入文档的URL、用在HTML标记语言的target属性、引用目标的大小。如：

var subWindow=window.open("define.html","def","status,HEIGHT=200,WIDTH=300")

当运行window.open()方法时，它不仅根据指定的参数集打开新窗口，而且将得到新窗口的引用。将引用赋给变量，可以通过这个变量来操作这个窗口。

window features可能的参数为：

height，窗口的高度。

width，窗口的宽度。

left，窗口距屏幕左边的位置。

top，窗口距屏幕顶部的位置。

toolbar，是否显示标准工具栏。

location，是否显示URL。

status，是否显示状态栏。

menubar,是否有菜单栏。

resizable，是否可以改变窗口大小。

关闭主窗口使用window.close()方法。、

window对象窗口的属性和方法

window.status属性

该属性用于设置状态栏显示的信息。例如为了改变链接的状态栏文本，应该使用link对象的onMouseOver事件处理触发一个动作。设置状态栏的onMouseOver事件处理要求一个附加语句return true，它必须是事件处理程序的一部分。

<A href="http://www.baidu.com" onMouseOver="window.status='open baidu.com';return true">baidu.com</A>

当把它们作为内嵌脚本运行时，必须用分好把两个语句分开。

window.closed属性

该属性用于判断窗口是否已被关闭，如果是关闭的，返回true；否则返回false。

window.history属性

表示当前窗口的历史记录，可以引用在网页导航中。

document属性

表示当前窗口中显示的当前文档对象。

location属性

表示当前窗口中显示的当前URL的信息。

name属性

表示当前窗口对象的名字

opener属性

表示打开当前窗口对象的父窗口

parent属性

表示包含当前窗口的父窗口

self属性

表示当前窗口

length属性

表示当前窗口中框架的个数

top属性

表示一系列嵌套的浏览器中最顶层的窗口

window.alert()方法

这个窗口方法生成一个对话框，该对话框显示传给参数的文本。alert()方法并不需要引用窗口。

alert("this is a JavaScript alert dialog")

window.confirm()方法

确认对话框有两个按钮Cancel和Ok。它具有返回值，点击ok按钮返回值为true。点击cancel按钮则返回false。

window.prompt()方法

提示对话框，它显示预先设置的信息并提供文本域供用户输入应答。该方法有两个参数，第一个作为提示信息，如果将一个字符串作为第二个参数，可在文本域显示一个默认答案，如果不需要默认答案就传递一个空串。当单击按钮时这个方法将返回一个值，单击cancel按钮会返回null值。单击ok按钮返回键入的字符串值。

window.focus()方法

该方法是窗口获得焦点。

window.print()方法

相当于浏览器的打印按钮使浏览器打印网页。

window.setTimeout(expression,time)方法

设置一定时间后自动执行expression代表的代码，单位为毫秒。返回一个整型ID值

window.setInterval(expression,time)方法

设置一个时间间隔，使expression代表的代码可以周期性地被执行。单位为毫秒。返回一个整型ID值。

window.clearTimeout(ID)方法

取消setTimeout设定的定时操作。

window.clearInterval(ID)方法

取消setInterval设定的定时操作。

clipboardData

windowObj.clipboardData

运用clipboardData对象在脚本控制下传送数据，完成诸如剪切、复制、粘贴等操作。用clipboardData对象模型需要以下三种方法：

ClearData([format])，从剪贴板删除数据，如果没有提供格式化的数据，所有数据都将被删除。数据格式可以为以下字符串之一：Text、URL、File、HTML、Image。没有返回值。

getData(format)，从剪贴板重新找到特定格式的数据。当获取数据的时候，如果剪贴板非空，可以通过多种连续的操作得到数据。返回值为字符串。

setData(format,data)，存储字符串数据，格式可以为：Text、URL、File、HTML、Image。对于非文本数据格式，数据必须是字符串，它指定到当前内容的路径或URL。成功传输到剪贴板时返回true。返回值为boolean。

closed

windowObj.closed

返回值为boolean,

execScript()，IE特定的window.execScript()方法执行一个或多个脚本语句，这些脚本语句作为字符串表达式传递。不像JavaScript的eval()函数，execScript()方法不返回值，而且方法在拥有当前文档窗口的全局变量空间内执行。

print()

windowObject.print()，没有返回值，该方法提供了从框架集将窗口或框架传递到打印机的脚本方法。在任何情况下进行手工打印时，Print对话框将显示。并让用户选择打印机类型。

resizeBy(deltaX,deltaY)与resizeTo(outerwidth,outerheight)，用户改变当前浏览器窗口的大小，它们的调整都影响到窗口右下角。如果要移动左上角，使用window.moveBy()或window.moveTo()方法。

onLoad事件

该事件是在页面载入完成时触发的事件。所有对象的事件处理都会放在<body>标记中。

如：<body onload="某方法名">

showModalDialog("URL"[,arguments][,features])

showModalessDialog("URL"[,arguments][,features])

模式对话框返回值而非模式对话框返回window对象。

sizeToContent()

确定窗口是否调整到最适合内容显示的大小。

2Location对象

location对象就是表示载入窗口的URL。多数情况下，脚本只对一个属性感兴趣：href属性，它定义了完整的URL。设置location.href属性是脚本导航到其他页面的基本方法：

location.href="http://ww.dannyg.com"

window.opener的用法

在脚本浏览器中，每个窗口都有一个叫做opener的属性。该属性包含窗口或框架的引用，这些窗口或框架存放一些脚本，脚本的window.open()语句生成子窗口。对主浏览器窗口和框架，这个值是null。

window.opener 返回的是创建当前窗口的那个窗口的引用.例如:A用open()方法创建了B，那么在B中可以通过opener来引用A，操作A中元素。如在B中刷新A：javascript:opener.document.location.reload()。对于不是使用open()方法打开的页面B，opener值为null。

状态条的使用

javascript程序可利状态条为用户显示定制消息。这一工作主要由onMouseOver事件处理程序完成例：

<html>

<head>

<title>status example</title>

</head>

<body>

<A href="home.html" onMouseOver="self.status='Go Home!';return true;">home</A>

<A href="next.html" onMouseOver="self.status='Go to the next Page!';return true;">next</A>

</body>

</html>

4Event对象

Event对象是一种只与事件处理过程有关的特殊的对象，它属于JavaScript的内置对象，可以通过一些属性来描述一个JavaScript事件。Event对象能够接受到有关事件以及事件发生时浏览器和页面的状态信息。

与IE有关的Event对象的属性：

altKey，当Alt键按下时为真。

ctrlKey，当Ctrl键按下时为真。

shiftKey，当shift键按下时为真。

button，当事件发生时按下的鼠标键（0表示未按任何键，1表示按下左键，2表示按下右键）。

clienX，鼠标光标想对于事件所在窗口的客户区域的水平坐标。

clientY，鼠标光标相对于事件所在的窗口的客户区域的垂直坐标。

keyCode，与所按下的见相关联的Unicode代码。

offsetX，鼠标光标相对于事件所在对象的水平坐标。

offsetY,鼠标光标相对于事件所在对象的垂直坐标。

screenX，鼠标光标相对于用户屏幕的水平坐标。

screenY，鼠标光标相对于用户屏幕的垂直坐标。

*********************

screen.width获取显示器的水平分辨率

screen.height获取显示器的垂直分辨率

********

框架集在集合中建立框架间的关系。

父到子的引用

父窗口是包含两个或多个框架，就是说父窗口包含子框架对象的一个数组。可以通过数组语句或框架名定位一个框架，框架名可以用<frame>标记中的name属性进行设置。每个框架都包含一个document对象，它一般是脚本使用的元素的容器。从父框架到子框架的引用如下：

[window.]frams
.ObjFuncVarName

[window.]frameName.ObjFuncVarName

OjbFuncVarName的占位符即表示需在其他窗口或框架中访问的对象。框架的索引值有<frame>标记出现在框架集中的顺序决定。可以忽略掉window。

子到父的引用

通常脚本会放在父框架中，这个父框架被多个子框架或一个框架的多个文档用做脚本库。从子框架的角度来看，它的上一层称为parent(父层）。因此从子框架到父层的元素的引用如下:

window.parent.ObjFuncVarName()//调用父框架中的函数。

当父窗口位于当前载入浏览器中的对象层次的顶部，可以随意地把他作为顶部窗口，如：

top.ObjFuncVarName()

当web页面显示在其他Web站点的框架集中时，使用top引用可以能会导致错误，因为此时顶部窗口不是主框架集的顶部窗口。

子到子的引用

任何窗口或框架都拥有parent属性，引用必须使用parent属性来跳出当前的框架，并转到所有子框架的父窗口。一旦这个引用转到父框架层次上，引用可以接着进行，就像在父框架上开始一样。从一个子框架到另一个子框架采用如下格式：

window.parent.frames
.ObjFuncVarName()//调用兄弟框架中的函数

window.parent.frameName.ObjFuncVarName()

****************************************

关于页面刷新和iframe刷新

1.页面中刷新 window.location.reload();

2.iframe刷新

<iframe src="1.htm" name="ifrmname" id="ifrmid"></iframe>

方案一:用iframe的name属性定位

<input type="button" name="Button" value="Button"

onclick="window.frames['ifrmname'].location.reload()">

方案二:用iframe的id属性定位

<input type="button" name="Button" value="Button"

onclick="ifrmid.window.location.reload()">

终极方案:当iframe的src为其它网站地址(跨域操作时)

<input type="button" name="Button" value="Button"

onclick="window.open(document.all.ifrmname.src,'ifrmname','')">

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航