6框架文档和窗口

Posted 小飞虫bin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了6框架文档和窗口相关的知识,希望对你有一定的参考价值。

框架
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>
<!--somecode-->
<a href="frame1.location=‘3.html;frame2.location=‘4.html‘" onclick="">link</a>
<!--somecode-->
引用其他框架内的JavaScript变量和函数
在介绍引用其他框架内JavaScript变量和函数的技术之前,先来看以下代码:
<script language="JavaScript" type="text/javascript">
<!--
function hello(){
      alert("hello,ajax!");
}
window.hello();
//-->
</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">
<!--
var arrOrders=new Array();
function addToOrders(id){
      arrOrders.push(id);
}
//-->
</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">
<!--
function yunxing(){
//操作其它框架中的元素。
parent.frames[0].document.forms[0].weight.value=60;
parent.frames[0].document.forms[0].height.value=1.71;
parent.frames[0].document.forms[0].enter.click();
}
//-->
</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[n].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[n].ObjFuncVarName
[window.]frameName.ObjFuncVarName
OjbFuncVarName的占位符即表示需在其他窗口或框架中访问的对象。框架的索引值有<frame>标记出现在框架集中的顺序决定。可以忽略掉window。

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

当父窗口位于当前载入浏览器中的对象层次的顶部,可以随意地把他作为顶部窗口,如:
top.ObjFuncVarName()

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

子到子的引用
任何窗口或框架都拥有parent属性,引用必须使用parent属性来跳出当前的框架,并转到所有子框架的父窗口。一旦这个引用转到父框架层次上,引用可以接着进行,就像在父框架上开始一样。从一个子框架到另一个子框架采用如下格式:
window.parent.frames[n].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‘,‘‘)">





以上是关于6框架文档和窗口的主要内容,如果未能解决你的问题,请参考以下文章

第九课——框架窗口

初识MFC----文档类CDocument

html中窗口框架的基本结构,主要利用哪两个标记来定义的?

MFC Document/View 2

超链接的目标网页在新窗口中打开的方式是

target