框架：

在网络上我们可以看到很多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 note--czx

    -------------------------------------------------------+++------------------------------------------ ...

  2. 论文阅读（Weilin Huang——【AAAI2016】Reading Scene Text in Deep Convolutional Sequences）

    Weilin Huang--[AAAI2016]Reading Scene Text in Deep Convolutional Sequences 目录 作者和相关链接 方法概括 创新点和贡献 方法 ...

  3. 夺命雷公狗-----React---24--小案例之react经典案例todos（单条任务的删除）

    我们的组建分析图 我们组建需要的是删除,数据流方式如下所示: 为了更方便下一步操作,先写个函数他 然后在Ul组建里面对她进行处理 然后在Zong组建里对数据进行处理,如下所示: 但是悲剧的一幕出现了, ...

  4. python学习笔记系列----（五）输入和输出

    这一章主要是讲述程序展示其数据的一些方法,一般都是直接按照一定的格式输出在屏幕,或者写入到文件以便以后使用.按照一定格式的输出,在python中实际就是对str的操作,主要就是介绍了formart() ...

  5. maven 构建一个web项目

    maven已经大型的Java项目的管理工具,其功能非常强大,这里简单总结一下maven构建web项目的过程.本文介绍的是集成环境下的maven构建web项目. 一.准备 1.安装maven. 2.把m ...

  6. ASP.NET Repeater嵌套Repeater实现菜单加载

    在KS系统中要实现从数据库中读取界面权限文件实现菜单.界面的动态加载. 效果图: ASP.NET界面代码 <div id="menu-container"> <a ...

  7. logrotate

    logrotate程序是一个日志文件管理工具.用于分割日志文件,删除旧的日志文件,并创建新的日志文件,起到"转储"作用.可以节省磁盘空间. logrotate命令格式:logrot ...

  8. 笔记--MySQL相关操作

    一  登录数据库 1 用户无密码: mysql -uroot -p mysql-> 2 用户有密码: MySQL -root -p[passwd] mysql-> 二  创建数据库: 查询 ...

  9. yii2框架增删改查案例

    //解除绑定蓝牙 //http://www.520m.com.cn/api/pet/remove-binding?healthy_id=72&pet_id=100477&access- ...

  10. linux文件基本属性

    在Linux中第一个字符代表这个文件是目录.文件或链接文件等等. 当为[ d ]则是目录 当为[ - ]则是文件: 若是[ l ]则表示为链接文档(link file): 若是[ b ]则表示为装置文 ...