框架：

在网络上我们可以看到很多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. Spting--DI/IOC

    DI/IOC <bean> 代表由容器构建的对象(通过反射构建,且类必须有无参的构造方法)  公共属性 id="唯一的id" 在容器中是唯一的 name="类 ...

  2. WebForm Repeater使用

    Repeater: HeaderTemplate: 在加载开始执行一遍 ItemTemplate : 有多少条数据,执行多少遍 FooterTemplate :在加载最后执行一遍 Alternatin ...

  3. OpenCV整体的模块架构

    之前啃了不少OpenCV的官方文档,发现如果了解了一些OpenCV整体的模块架构后,再重点学习自己感兴趣的部分的话,就会有一览众山小的感觉,于是,就决定写出这篇文章,作为启程OpenCV系列博文的第二 ...

  4. (ExtJs 3.4)Ext.Ajax.request的同步请求实现

    ext3.0之前都是这样来提交:var responsea = Ext.lib.Ajax.getConnectionObject().conn;responsea.open("POST&qu ...

  5. WebApi 通过类名获取类并实例化

    环境:Web Api 返回值类型为DTO实体,继承基类DTO---BaseResultDto public class BaseResultDto { /// <summary> /// ...

  6. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数014,tuple，元组

    <zw版·Halcon-delphi系列原创教程> Halcon分类函数014,tuple,元组 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替换:“p ...

  7. WebConfig错误页配置

    在system.web节下配置<customErrors mode="On" defaultRedirect="/ErrorPage/MyErrorPage.htm ...

  8. Window Azure ServiceBus Messaging消息队列技术系列1-基本概念和架构

    前段时间研究了Window Azure ServiceBus Messaging消息队列技术,搞了很多技术研究和代码验证,最近准备总结一下,分享给大家. 首先,Windows Azure提供了两种类型 ...

  9. Xcode 7 PCH宏文件的配置和使用---学会使用宏定义

    使用宏的目的是什么? 由于实际开发中,有时候一些设置信息需要重复使用(例如设置打印信息.配置颜色.配置宽度等),如果每次都手动去敲每次都去创建会很麻烦.虽然宏使用的时候会占用内存,可是目前来说大部分开 ...

  10. Qt qml listview 列表视图控件（下拉刷新、上拉分页、滚动轴）

    Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) [先看效果]    [功能] 下拉刷新 ...