框架：

在网络上我们可以看到很多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. jquery cdn/////////////////zzz

    jquery-2.1.1 注:jquery-2.0以上版本不再支持IE 6/7/8)百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况) 百度压缩版引用地址:<script src=&qu ...

  2. 2.MongoDB数据库简介

    1).简介 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. mongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系 ...

  3. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

  4. <connectionStrings> <appSettings> 读取方法

    C#中ConnectionStrings和AppSettings的区别 时间 2013-03-07 15:57:00  博客园精华区 原文  http://www.cnblogs.com/bindot ...

  5. python学习笔记之基础一（第一天）

    1. python字符介绍 在C语言中没有字符串,只有字符 在python中的字符串hello,在C语言中是以字符数组在内存存放['h','e','l','l','o'],如果对字符串修改,则是在内存 ...

  6. Clouda聊天室实践

    1.Clouda说明 Clouda是简单,可依赖的实时Javascript框架.对一个想开发移动webapp的开发者来说,可以使用clouda开发框架,实现一个功能和体验与native app齐平的轻 ...

  7. 上海有线通下载exe会302转发请求

    起因: 做的软件用的clickonce,在公网的clickonce下载exe时一直报错,在vpn环境下没问题.错误提示如下: + HTTP redirect is not allowed for ap ...

  8. jade模板

    jade 模板使用 npm install jade -g      安装到全局 jade index.jade         导出一个 index.html 压缩后的 jade -P index. ...

  9. mysql 慢查询日志切割

  10. 漫谈单点登录（SSO）(淘宝天猫)

    1. 摘要 ( 注意:请仔细看下摘要,留心此文是否是您的菜,若浪费宝贵时间,深感歉意!!!) SSO这一概念由来已久,网络上对应不同场景的成熟SSO解决方案比比皆是,从简单到复杂,各式各样应有尽有!开 ...