框架：

在网络上我们可以看到很多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. java 关键字 assert的学习

    之前在学习java源码时,发现了assert这个不常用的关键字.下面直接来介绍下这个关键字的使用. assert是什么? 它是jdk1.4之后新增加的关键字,没了. assert的作用是什么? ass ...

  2. Caffe框架下的图像回归测试

    Caffe框架下的图像回归测试 参考资料: 1. http://stackoverflow.com/questions/33766689/caffe-hdf5-pre-processing 2. ht ...

  3. 误用的volatile

    在嵌入式编程中,有对某地址重复读取两次的操作,如地址映射IO.但如果编译器直接处理p[0] = *a; p[1] = *a这种操作时,往往会忽略后一个,而直接使用前一个已计算的结果.这是有问题的,因为 ...

  4. 闲鱼demo

    编程是一种美德,是促使一个人不断向上发展的一种原动力 -----–以下是正文------- 最近好多app的底部标签导航使用以下形式了,所以我们就来学习一下它是如何实现的. 先看效果: 中间的&quo ...

  5. Connect to Database Using Custom params链接数据库配置参数说明

    使用RF的关键字Connect to Database Using Custom params链接数据库,对应的参数说明: a)     第一个参数我使用的是cx_Oracle,就写这个 b)     ...

  6. Solution for Error FRM-92095: Oracle Jnitiator version too low

    Solution for Error FRM-92095: Oracle Jnitiator version too low By Pan.Tian on 六月 04, 2013 Symtom: Af ...

  7. <Interview Problem>最小的“不重复数”

    百度的一道笔试题目,看到博客园讨论挺热烈的,也写一下玩玩. 实现思想:举个简单的例子11233,从高位到低位开始判断是否有重复数,高位有重复数后,首先修改高位的,高位修改后变为12233,因为要求最小 ...

  8. kafka0.9.0及0.10.0配置属性

    问题导读1.borker包含哪些属性?2.Producer包含哪些属性?3.Consumer如何配置?borker(0.9.0及0.10.0)配置Kafka日志本身是由多个日志段组成(log segm ...

  9. postman插件安装教程

    第一步: 第二步: 第三步: 这样就可以了. 插件下载链接: http://pan.baidu.com/s/1eRVLMpk 密码: 49vb

  10. oracle wrapped 代码解密工具 unwraper

    Oracle中的Wrap 功能是为了不让别人看到函数/存储过程的SQL源码的明文, 作为技术宅,有的时候想看源码但是看不到的那种心情是可以理解的, 发一个简单易用的 Oracle wrapped 解码 ...