框架：

在网络上我们可以看到很多WEB应用程序都是使用框架（frame）来分隔浏览器窗口的，就想一块块玻璃隔板把窗口分隔成好几个小窗口，并且可以在不同的小窗口中加载显示不同的页面，这样在我们看来好像是一个完整的页面，但实际上它是由几个页面组合而成的。

javascript允许我们操作框架，在一个框架中定义的变量和函数可以在另一个框架中使用。这样做可以实现两个优点。

  1. 代码模块化：可以把通用的代码和属性统一放在一个框架中，然后在其他页面中使用。那么这个放置通用函数和属性的框架就叫做代码模块。
  2. 可以方便在页面中传递信息。如果你把函数或变量放置在定义框架集页面中，那么你在修改框架中的页面，在框架集页面中定义的属性和方法也不会改变。
定义框架用<frameset/>元素包含<frame/>元素，在<frameset/>元素定义框架的显示结构（方式），在<frame/>元素中定义每个框架并指定要包含的文档。

在前面我们都是说单个页面，而单个页面就是一个window对象，但如果页面中有多个框架，那么除了框架集的顶层window对象外，每个框架都对应一个window对象。这些框架window对象都包含在顶层window对象中。
举个例子说明  测试请用ie8
定义框架集页面html.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Chapter 8: Example 1</title>

</head>

<frameset rows="50%, *" id="topWindow">

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

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

</frameset>

</html>

这个框架集页面包含两个框架，分别对应uphtml.html和downhtml.html页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	<title>Document</title>

	<style>

	body{background: yellow;width: 100%;height: 500px;}

	</style>

	<script>

	function fun01(){

		alert(window.parent.location.href);

		alert(window.name);

	}

	</script>

</head>

<body onload="fun01()">

我是上面的页面

</body>

</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	<title>Document</title>

	<style>

	body{background: red}

	</style>

		<script>

	function fun01(){

		alert(window.parent.location.href);

		alert(window.name);

	}

	</script>

</head>

<body>

我是下面的页面

</body>

</html>

它们的父亲都是html.html页面。

parent属性：

它允许访问当前框架的父框架的window对象。通过这属性就可以访问父window对象的所有属性和方法。也可以通过访问父框架来访问其他包含在父框架中的其他框架。
有个问题就是如果底层有很多框架那么用这方法访问顶层框架就有点麻烦，这是我们可以使用

top属性：

可以直接返回顶层窗口的window对象引用，无论是嵌套的多深。

这两个属性各有有点，parent属性返回的是当前窗口的父窗口，上一层，window.parent，再上一层是window.parent.parent依次类推。top属性无论什么框架的结构都直接返回最顶层窗口。
parent依赖于其上的框架结构，如果框架中嵌套的是其他网站的，那么top可能不是原来的框架了。这是需要注意的，这里可以通过脚本来判断。

IFrames

内嵌框架IFrames，通过它可以把内联框架添加到页面中。通过它们可以给网页添加框架也无须使用框架集。
<iframe  name="myhml" src="myhtml.html"></iframe>

这代码是把名为myhtml的框架添加到页面中，该框架加载了myhtml.html文档。

访问IFrames对象也很简单。
如：
window.myhtml   直接通过名字

window.iframe["myhtml"]   通过名字+索引
window.iframe[0]   用索引数字

打开新窗口

所有的最新版的浏览器都阻止弹出窗口的功能，默认的情况下会阻止弹出在页面加载时自动创建的新窗口。但一般不会阻止在用户必须执行某个操作（如单击连接或按钮）时打开的窗口，但用户可以修改浏览器的设置来阻止弹出这种窗口。
window对象的open()方法会打开新窗口，它接受三个参数，其中第三个可选，该方法返回对新浏览器窗口的window对象的引用。使用这个引用可以执行与处理window对象所能进行执行的所有操作。

window对象的open()方法：

第一个参数是要在新窗口打开的页面的URL，若给此参数传送空字符串，得到的是一个空白页面，再使用document.write()方法在新窗口中 动态插入html.第二个参数是要分配给新窗口的名称，这个不是为了提供给脚本使用，而是提供给a连接target属性使用，即点击该连接时会打开这个名称的窗口。

	<a href="downhtml.html" target="myopen">fff </a>

这表示单击连接时，downhtml.html页面会加载到新窗口，而不是当前窗口中。form元素的target属性也是这样。

打开的新窗口中，窗口会默认带一些属性，如width和height，该方法的第三个参数可以指定这些属性，另外很多浏览器窗口的大多特性都是默认关闭。

window对象的close()方法：

关闭刚打开的窗口。

window对象的closed属性

判断窗口是否关闭，如果窗口关闭，该属性返回true，如果仍然打开，则返回false。


document.write()方法：

每次使用该方法时，文本都会添加到已有内容的后面，直到是使用document.close()方法关闭文档为止。那么再使用document.wire()方法时，所传送的文本就会替换已有的html，而不是添加在内容的末尾。
open()方法的第三个参数

窗口的特性 可以取的值 描述
copyHistory 
  yes/no 
 当打开新窗口时复制当前窗口的历史记录
directories yes/no 显示目录按钮
height 整数 新窗口的高度
width 整数 新窗口的宽度，以像数为单位
left 整数 新窗口距屏幕左边界的距离
location yes/no 显示地址文本字段
menubar yes/no 显示菜单栏
resizable yes/no 打开新窗口后，允许用户重置新窗口的大小
scrollbars yes/no 如果页面太大，在新窗口中放不下，就显示滚动条
status yes/no 显示状态栏
toolbar yes/no
 显示工具栏
top 整数
 新窗口距屏幕顶部的距离

以上参数并不是所有的选项都同时使用于ie和火狐。

在新窗口中访问打开窗口的源窗口的window对象。

window对象中的opener属性：

属性是对打开新窗口的window对象的引用，允许访问远窗口window对象及其属性。
window.opener.document.bgColor=“red”；

打开一个窗口后，可以使用resizeTo(x,y)和resizeBy(x,y)重置窗口的大小，使用moveTo(x,y)和moveBy(x,y)移动窗口。


注意了，“不同源”窗口和框架在之间的属性访问是有很多的限制，“不同源”指的是一个框架中的文档来自一个服务器，另一个框架中文档来自另一个服务器。









javascript中的窗口和框架的更多相关文章

  1. JavaScript中的BOM知识框架

    浏览器对象模型(BOM)以window对象为依托,表示浏览器窗口及可见区域.同时,window对象和还是全局对象,因此所有求安局变量和函数都是它的属性,所有原生框架及其他函数都在它命名之下.BOM中对 ...

  2. 理解javascript中的浏览器窗口——窗口基本操作

    × 目录 [1]窗口位置 [2]窗口大小 [3]打开窗口[4]关闭窗口 前面的话 BOM全称是brower object model(浏览器对象模型),主要用于管理窗口及窗口间的通讯,其核心对象是wi ...

  3. （转载）JavaScript中的Window窗口对象

    (转载)http://www.ijavascript.cn/jiaocheng/javascript-window-65.html 例子: <html> <head> < ...

  4. javascript 中的console.log和弹出窗口alert

    主要是方便你调式javascript用的.你可以看到你在页面中输出的内容. 相比alert他的优点是: 他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是co ...

  5. JavaScript中常用语句

    1.document.write( " "); 输出语句 2.JS中的行注释为:// 块注释:/**/ 3.传统的HTML文档顺序是:document- >html- > ...

  6. Javascript中String对象的的简单学习

    第十一课String对象介绍1:属性    在javascript中可以用单引号,或者双引号括起来的一个字符当作    一个字符对象的实例,所以可以在某个字符串后再加上.去调用String    对象 ...

  7. 转 asp.net中如何退出整个框架（frameset）,回到登录界面

    如: <frameset rows= "74,*,0,0 " cols= "* " frameborder= "NO " border ...

  8. javascript中的cookie,以及事件解析

    Cookie: 它的意思是在本地的客户端的磁盘上以很小的文件形式保存数据,Cookie的处理原则上需要在服务器环境下运行,目前Chrome不可以在客户端操作Cookie,其他浏览器均可以,   Coo ...

  9. JavaScript中的Function（函数）对象

    1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4. ...

随机推荐

  1. struts-OGNL

    特点 常用来访问值栈里对象属性的一种语言 通常由struts标签来解析执行 <%@ taglib prefix="s" uri="/struts-tags" ...

  2. C++之路进阶codevs1269（匈牙利游戏）

    1269 匈牙利游戏 2012年CCC加拿大高中生信息学奥赛  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond       题目描述 Description ...

  3. 利用selector设置ImageButton不同状态下的背景图片

    1.自定义MyButton类 public class MyButton extends Button { //This constructormust be public MyButton(Cont ...

  4. Linux搭建nfs服务器

    使用linux进行嵌入式开发的时候,为了方便开发,通常是将开发板挂载到宿主机的文件系统上,然后将代码放到共享给开发板的目录中,再通过开发板运行. 首先查看是否安装了 nfs 软件包,yum list ...

  5. iOS的数据持久化

    所谓的持久化,就是将数据保存到硬盘中,使得在应用程序或机器重启后可以继续访问之前保存的数据.在iOS开发中,有很多数据持久化的方案,接下来我将尝试着介绍一下5种方案: plist文件(属性列表) pr ...

  6. EditPlus 3.7 中文版已经发布

    新一版的 EditPlus 已经在昨天发布了!新版本增加了一个 64位版程序.大家可以到官方网站下载哦. 我同步更新翻译了 32位版应用程序.请点击页面左上角的链接下载.

  7. EntityFramework 使用经验

    1.Nuget控制台常用命令 1.获取EntityFramework命令帮助:get-help EntityFramework  2.在项目中启动数据迁移:Enable-Migrations 3.添加 ...

  8. MessageReceiver

    class MessageReceiver { private RelayEngine<MessageCollection> _MessageRelayEngine; private st ...

  9. [已解决] github merge指定commit

    比如说有两个branch,分别是master和m1,我们在m1上修改的bug怎么merge到master上呢, 怎么merge我不知道,但是有另外一个命令可以做到,比如m1做commit,sha-1为 ...

  10. sql 查询表中所有字段的名称

    最近工作用到SQL语句查询表中所有字段的名称,网上查询,发现不同数据库的查询方法不同,例如: SQL server 查询表的所有字段名称:Select name from syscolumns Whe ...