JavaScript权威设计--Window对象之Iframe(简要学习笔记十四)

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。

时间: 2024-08-02 10:59:17

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

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

1.Window对象是所有客户端JavaScript特性和API的主要接入点. Window对象中的一个重要属性是document,它引用Document对象. JavaScript程序可以通过Document对象和它包含的Element对象遍历和管理文档. 2.URL中的JavaScript 在URL后面跟一个JavaScript:协议限定符.里面的代码会作为JavaScript代码进行运行,需用分号分割. 如: <a href="javascript:alert('OK!')"

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

1.函数命名规范 函数命名通常以动词为前缀的词组.通常第一个字符小写.当包含多个单词时,一种约定是将单词以下划线分割,就像"like_Zqz()". 还有一种就是"likeZqz()".有些些函数是用作内部用的或者为私有函数通常以一条下划线为前缀,就像"_zqzName()". 2.以表达式方式定义的函数 如: var zqz=function (){ return "zhaoqize"; } 在使用的时候必须把它赋值给一个变

JavaScript权威指南(第6版)学习笔记一

第2章  词法结构 一.字符集 *JavaScript程序是用Unicode字符集编写的. *JavaScript严格区分大小写. *JavaScript注释:(1)"//"用于单行注释:(2)"/*    ....     */"用于多行注释. *JavaScript使用分号将语句之间分隔:如果各条语句单独成一行,通常可以省略分号.但下面几种情况需要注意: a = 3; //这里的分号是可以省略的 b = 4; a = 3; b = 4; //这里第一个分号不能省

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

1.事件冒泡与事件捕获 2.事件与事件句柄 3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处: 1.每个函数都是对象,都会占用内存,内存中对象越多,性能越差. 2.必须事先指定所有事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间. 怎样处理由于事件较多引起的性能差: 1.采用事件委托技术,限制简历的连接数量 2.在不需要的时候移除事件处理程序 例子: html: <div id="myDiv&

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

1.作为命名空间的函数 有时候我们需要声明很多变量.这样的变量会污染全局变量并且可能与别人声明的变量产生冲突. 这时.解决办法是将代码放入一个函数中,然后调用这个函数.这样全局变量就变成了 局部变量. 如: function my(){ } my(); //别忘记调用 这段代码定义了一个单独的全局变量:名叫"my"的函数. 我们还可以这么写,定义一个匿名函数: (function(){ //这里第一个左括号是必须的,如果不写,JavaScript解析器会将 //function解析成函

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

1.Document的一些特殊属性 document.lastModified document.URL document.title document.referrer document.domain document.write() document.writeIn() 2.查询选取的文本 使用鼠标mouseup事件 3.浏览器定义了多项文本编辑命令(富文本编辑器) 使用Document对象的execCommand()方法. document.queryCommandSupport()判断浏

事件源,事件对象(简要学习笔记十八)

3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处: 1.每个函数都是对象,都会占用内存,内存中对象越多,性能越差. 2.必须事先指定所有事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间. 怎样处理由于事件较多引起的性能差: 1.采用事件委托技术,限制简历的连接数量 2.在不需要的时候移除事件处理程序 例子: html: <div id="myDiv"> <input ty

JavaScript权威指南(第6版)学习笔记三

第六章对象 对象可以看成其属性的无序集合,每个属性都是一个名/值对.JavaScript对象是动态的,可以新增也可以删除属性,可以通过引用而非值来操作对象.如果变量x是指向一个对象的引用,那么执行代码var y=x;变量y也会指向同一个对象的引用,而非这个对象的副本,所以通过变量y修改这个对象也会对x产生影响. 对象最常见的用法是创建(create).设置(set).查找(query).删除(delete).检测(test)和枚举(enumerate)它的属性. 属性包括名字和值.属性名可以是包

JavaScript权威指南(第6版)学习笔记四

第七章 数组 一.创建数组 使用数组直接量是最简单的方法: var empty=[]; var primes=[1,3,5,7,11]; var m=[1.1,"a",true]; var b=1024; var table=[b,b+1,b+2]; var bc=[[1,{x:1,y:2}],[2,{x:3}]] //如果直接量中省略某个值,则默认赋予undefined值 var count=[1,,3]; 数组直接量中允许元素结尾有逗号: var a=[1,2,]; //两个元素分