1.Window对象属性的文档元素(id)
如果在HTML文档中用id属性来为元素命名，并且如果Window对象没有此名字的属性，Window对象会赋予一个属性，它的名字是id属性的值，而他们的值指向表示文档元素的HTMLElement对象。
Window对象是以全局对象的形式存在于作用域链的最上层，这就意味着HTML文档中使用的id属性会成为可以被脚本访问的全局变量。
如：
<button id="but"/>
就可以通过全局变量but来引用此元素。
 
2.多窗体窗口(iframe)
不同于相互独立的标签页，嵌套的浏览上下文之间并不是相互独立的，在一个窗体
中运行的JavaScript程序总是可以看见它的祖先和子孙窗体。尽管脚本查看这些窗体中的文档
受到同源策略的限制。
类似于一个网页中嵌套了一个或者多个<iframe>，这多个iframe之间的交互。
 
a:window.open(URL,name,features,replace)
 
 
下图是第三个参数：
 
 
例子：
<html>

<head>

<script type="text/javascript">

function open_win()

{

window.open("http://www.baidul.com","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400")

}

</script>

</head>

<body>

<form>

<input type="button" value="打开窗口" onclick="open_win()">

</form>

</body>

</html>
 
窗口名字：
 
 
window.open()载入制定的URL到新的或已存在的窗口中，并返回代表那个窗口的Window对象。
需要注意的是：脚本是无法通过简单的猜测窗口的名字来操控这个窗口的web应用，只有设置了"允许导航"的页面才可以这样。
简单的说，当且仅当窗口包含的文档来自相同的源或者是这个脚本打开了那个窗口，脚本才可以只通过名字来制定存在的窗口。还有，如果其中一个窗口是内嵌在另外一个窗口里的窗体，那么在他们的脚本之间就可以相互导航。就可以使用保留字"_top"(顶级祖先窗口),"_parent"(直接父级窗口)来获取彼此的浏览上下文。
 
Window对象的方法open（）返回代表新创建的窗口的Window对象。而且这个心窗口具有opener属性，该属性可以打开它的原始窗口。
如：
 
//window.open()所在页面是zqz_1.html,

var w=window.open('zqz_2.html');

//打开新的窗口zqz_2.html

w.open().opener===w

//即opener所指的是zqz_1.html
 
b: 嵌套iframe
如图：
如果一个窗口是顶级窗口或标签，那么
parent==self //只有顶级窗口还会返回true
如果一个窗口包含在窗口的窗口中，那么parent.parent来引用顶级窗口
无论一个窗体被嵌套了几层，使用top直接返回顶级窗口。
 
见图1,2,3,4
一个网页中嵌套了一个iframe，该iframe的id='zqz_2',那表示该元素的对象就是：
var zqz_2=document.getElementById('zqz_2');
 
<iframe>元素有contentWindow属性，引用该窗体的window对象，所以该窗体对象就是：
var zqz_2=document.getElementById('zqz_2').contentWindow;
 
每一个Window对象都有一个frames属性，它引用自身包含的窗体的子窗口。
frames属性是类数组对象。类数组对象我们前面说过。所以可以通过索引进行获取,即：frames[0]。使用parent.frames[1]引用兄弟窗体。
注意：frames[]数组里的元素是Window对象，而不是<iframe>元素。
 
如果指定<iframe>元素的名字，还可以用名字来索引。如:frames["zqz_2"]或frames.zqz_2
 
对于窗体来说，通过Window对象的属性引用的<iframe>是指窗体中的Window对象，而不是元素对象。
HTML5规范指出frames属性是一个自引用的属性，而这个window对象看起来像一个由窗体组成的数组。即：可以通过window[0]来获取第一个子窗体的引用。window.length。
 
3.多窗体交互
直接上例子：
 
父调用子，子调用父，子调用子。
 
ZQZ.html(父)
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>ZQZ</title>

    <style>

    </style>

</head>

<body>

<iframe src="ZQZ_1.html" name="A" width="200px" height="300px"></iframe>

<iframe src="ZQZ_2.html" name="B" width="200px" height="300px"></iframe>

</body>

<script>

    //父调用子

    window.onload=function(){

        frames.B.a();

        alert(frames.B.b);

    };

    //子调用父

    function c(){

        alert("子调用父方法c()");

    }

    var d="子调用父变量d";

</script>

</html>

ZQZ_1.html(子)

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>ZQZ_1</title>

</head>

<body bgcolor="#a52a2a">

A

</body>

<script>

    //子调用子

    var i=1;

    alert(window.i);//i这个全局变量是全局对象那个的而一个属性，也是Window对象的一个属性。所以也可以这么调用

    function a() {

        alert("A中的函数a被调用");

    }

</script>

</html>

ZQZ_2.html(子)

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>ZQZ_2</title>

</head>

<body bgcolor="#ff7f50">

B

</body>

<script>

    //子调用子

    alert(parent.A.i);  //在name=“B”中调用A中的全局变量i

    parent.A.a(); //在name="B"中调用A中的函数a()

    //父调用子

    var b="父调用子b变量";

    function a(){

        alert("父调用子a方法");

    }

    //子调用父

    parent.c();

    alert(parent.d);

</script>

</html>
虽然上面在B中调用了A中的函数a(),但是a()的作用域依旧在A中。
也即:函数在定义它中的定义域中执行，而不是在调用它的作用域中执行。
 
 
 

JavaScript权威设计--Window对象之Iframe(简要学习笔记十四)的更多相关文章

  1. JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]

    1.$和jquery在全局命名空间中定义的唯一两个变量.   2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象.   3.jquery的四种调用方式:     <1>传递C ...

  2. JavaScript权威设计--Window对象(简要学习笔记十三)

    1.Window对象是所有客户端JavaScript特性和API的主要接入点. Window对象中的一个重要属性是document,它引用Document对象. JavaScript程序可以通过Doc ...

  3. JavaScript权威设计--JavaScript函数(简要学习笔记十)

    1.函数命名规范 函数命名通常以动词为前缀的词组.通常第一个字符小写.当包含多个单词时,一种约定是将单词以下划线分割,就像"like_Zqz()". 还有一种就是"lik ...

  4. JavaScript权威指南--window对象

    知识要点 window对象及其客户端javascript所扮演的核心角色:它是客户端javascript程序的全局对象.本章介绍window对象的属性和方法,这些属性定义了不同的API,但是只有一部分 ...

  5. JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)

    1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点   >>HtmlElement与 ...

  6. JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)

    1.事件冒泡与事件捕获 2.事件与事件句柄   3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处:     1.每个函 ...

  7. JavaScript权威设计--命名空间，函数，闭包(简要学习笔记十二)

    1.作为命名空间的函数 有时候我们需要声明很多变量.这样的变量会污染全局变量并且可能与别人声明的变量产生冲突. 这时.解决办法是将代码放入一个函数中,然后调用这个函数.这样全局变量就变成了 局部变量. ...

  8. JavaScript权威设计--跨域,XMLHttpRequest(简要学习笔记十九)

    1.跨域指的是什么? URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a. ...

  9. JavaScript权威设计--CSS(简要学习笔记十六)

    1.Document的一些特殊属性 document.lastModified document.URL document.title document.referrer document.domai ...

随机推荐

  1. 菜鸟Python学习笔记第一天：关于一些函数库的使用

    2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...

  2. SQL Server镜像自动生成脚本

    SQL Server镜像自动生成脚本 镜像的搭建非常繁琐,花了一点时间写了这个脚本,方便大家搭建镜像 执行完这个镜像脚本之后,最好在每台机器都绑定一下hosts文件,不然的话,镜像可能会不work 1 ...

  3. 富文本编辑器Simditor的简易使用

    最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...

  4. IL异常处理

    异常处理在程序中也算是比较重要的一部分了,IL异常处理在C#里面实现会用到一些新的方法 1.BeginExceptionBlock:异常块代码开始,相当于try,但是感觉又不太像 2.EndExcep ...

  5. java中的内部类总结

    内部类不是很好理解,但说白了其实也就是一个类中还包含着另外一个类 如同一个人是由大脑.肢体.器官等身体结果组成,而内部类相当于其中的某个器官之一,例如心脏:它也有自己的属性和行为(血液.跳动) 显然, ...

  6. SpringMVC入门

    Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动指的就是使用请求-响应模 ...

  7. Orcale 三层嵌套分页代码

    select * from( select emp.*,rownum a from ( select * from emp ) emp where rownum<7) where a>3

  8. C#执行异步操作的几种方式比较和总结

    C#执行异步操作的几种方式比较和总结 0x00 引言 之前写程序的时候在遇到一些比较花时间的操作例如HTTP请求时,总是会new一个Thread处理.对XxxxxAsync()之类的方法也没去了解过, ...

  9. 对一致性Hash算法，Java代码实现的深入研究

    一致性Hash算法 关于一致性Hash算法,在我之前的博文中已经有多次提到了,MemCache超详细解读一文中"一致性Hash算法"部分,对于为什么要使用一致性Hash算法.一致性 ...

  10. AngularJs2与AMD加载器(dojo requirejs)集成

    现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...