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。
 
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中。
也即:函数在定义它中的定义域中执行,而不是在调用它的作用域中执行。
转载:http://www.cnblogs.com/zqzjs/p/4841594.html
目录
相关文章
|
1月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
1月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
1月前
|
JSON 前端开发 JavaScript
JavaScript中对象的数据拷贝
本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
19 1
JavaScript中对象的数据拷贝
|
1月前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
2月前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
49 4
|
2月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
52 1
|
2月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
23 2
|
2月前
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
39 2
|
2月前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
40 0
|
2月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信