文档章节

JS子页面访问父页面元素/变量/函数

big_cat
 big_cat
发布于 2016/03/02 11:52
字数 842
阅读 457
收藏 3

四个属性变量

window.self    window.parent    window.top    window.frames

在页面中嵌入一个 iframe 页面后 子页面中并不能直接访问父页面中的变量、函数或者文档元素

1、使用 iframe 嵌入一个子页面其实相当于在当前 BOM 挂载了一个子 BOM

2、父 BOM 会将子 BOM 存放于 window.frames 属性中, frames 为数组,其中的元素为子 BOM 对象

3、BOM 对象即 window 对象,DOM 对象即 window.document

4、JS的作用于为当前 BOM,即 window,js的隐藏指针全局 this 也是指向的 window

index.html中使用iframe嵌人了main.html

main.html中使用iframe嵌入了sub.html

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html, body {
            height:100%;
        }
        * {
            margin: 10px 5px;
        }
    </style>
</head>
<body>
    <div style="border: 5px solid #00f">
        <p>this is index</p>
        <form name="user">
            <div><input type="text" name="username" value="sallency"></div>
            <div><input type="text" name="password" value="123456"></div>
        </form>
   
        <script type="text/javascript">
            var varIndex = 'index';
            function index() {
                return 'this is index function';
            }
            //访问子页面的子页面的函数
            console.log("index父页面访问main页面的sub页面函数:" + window.frames['main'].frames['sub'].sub());
             //访问子页面的子页面的函数
            console.log("index父页面访问main页面的sub页面DOM:" + window.frames['main'].frames['sub'].document.title);
        </script>
        <iframe src="main.html" name="main" width="500px" height="500px" style="border: 5px solid #f00">
        </iframe>
     </div>
</body>
</html>

main.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>main iframe</title>
    </head>
    <body>

        <div>
            <p id="main_passage">this is main iframe</p>
        </div>

        <script type="text/javascript">
            var varMain = "main";
            function main() {
                return 'this is main function';
            }
            //main访问父页面即index页面的index函数
            console.log(window.parent.index());
            //main访问父页面即index页面的标题
            console.log(window.parent.document.title);
            /main访问子页面即sub页面的sub函数
            console.log(window.frames['sub'].sub());
            //main访问子页面即sub页面的标题
            console.log(window.frames['sub'].document.title);
        </script>
        <iframe src="sub.html" name="sub" width="300px" height="300px;" style="border: 5px solid #0f0">
        </iframe>
        
    </body>
</html>

sub.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>
            sub iframe
        </title>
    </head>
    <body>
        <div>
            <p>this is sub iframe</p>
        </div>
        <script type="text/javascript">
            var varSub = "sub";
            function sub() {
                return 'this is sub function';
            }
            //注意 此window为sub iframe的window对象

            //其parent为main iframe 故不等顶层window
            console.log(window.parent == window.top);
            //main iframe的父级为顶层window
            console.log(window.parent.parent == window.top);
            //判断自己是不是顶层window
            console.log(window.self == window.top);

            //顶层window index的BOM(window)->DOM(document)->form->elements
            console.log('我是顶层window的DOM中的表单元素:' + window.top.document.forms['user'].elements['username'].name);
            //window.top.frames['main']即为main iframe的window对象 可以调用DOM和函数
            console.log(window.top.frames['main'].document.getElementById('main_passage').innerHTML);
            //可以使用每个window的frames数组去访问其子页面的BOM
            console.log('我是 main 函数:' + window.top.frames['main'].main() + '我是 main 变量:' + window.top.frames['main'].varMain);
            console.log('我是 main 函数:' + window.parent.main() + '我是 main 变量:' + window.parent.varMain);
            //父 window 访问自己的子 window 对象 层层递归
            console.log(window.top.frames['main'].frames['sub'].document.title);
        </script>
    </body>
</html>

1、window.top 会返回最顶层的 BOM,可以使用 window.self == window.top 来判定自己是不是顶层 BOM

2、window.parent 会返回自己的父 BOM,可以使用此对象访问 父页面的 变量 方法 和 document 对象

3、window.frames 存放着当前 BOM 的子 BOM 集合,可以通过 window.frames['frameName']去获取子 BOM,从而进一步操作子页面的 变量 函数 和 document

4、当我们通过以上变量和方法成功切换到某window的上下文中后即可访问此页面的 变量 方法 和 document 对象

以上便可以完成 父子页面 的相互访问


© 著作权归作者所有

big_cat
粉丝 49
博文 237
码字总数 162865
作品 0
长宁
后端工程师
私信 提问
前端面试之JavaScript

1. JS基本的数据类型和引用类型 基本数据类型:number、string、null、undefined、boolean、symbol -- 栈 引用数据类型:object、array、function -- 堆 两种数据类型存储位置不同 原始数据类...

大灰狼的小绵羊哥哥
2018/08/27
0
0
几个积累的javascript和css的技巧2

document.createElement()的用法 document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新...

王小明123
2013/07/14
233
0
一点感悟:走完所有大厂的实习面试

七月虽然不是一个丰收的季节,但却是一个十分酷热的月份。不知有多少小伙伴跟我一样,顶着大太阳奔波在各种面试的征途中。面试是一个漫长的过程。但是也是一个让你快速提升的过程。其中包含了...

hello等风来
2018/08/09
0
0
iframe子页面调用父页面javascript函数的方法(支持chrome和IE的通用方法)

iframe子页面调用父页面javascript函数的方法 今天遇到一个iframe子页面调用父页面js函数的需求,解决起来很简单,但是在chrome浏览器遇到一点小问题。顺便写一下iframe的父页面调用子页面j...

卖火柴的format
2014/08/11
3.4K
1
【翻译】Flask大型教程|第二十章:加点JavaScript魔法

本文翻译自The Flask Mega-Tutorial Part XX: Some JavaScript Magic 这是Flask Mega-Tutorial系列的第二十部分,我将添加一个功能,当你将鼠标悬停在用户的昵称上时,会弹出一个漂亮的窗口。...

一进制
2018/04/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

webGL和three.js的关系

本文转载于:专业的前端网站➤webGL和three.js的关系 如今浏览器的功能越来越强大,而且这些功能可能通过JavaScript直接调用。你可以用HTML5标签轻松地添加音频和视频,而且可以在HTML5画布上...

前端老手
24分钟前
5
0
Spring如何实现AOP,请不要再说cglib了!

1. 从注解入手找到对应核心类 最近工作中我都是基于注解实现AOP功能,常用的开启AOP的注解是@EnableAspectJAutoProxy,我们就从它入手。 上面的动图的流程的步骤就是: @EnableAspectJAutoPr...

温安适
26分钟前
27
0
Mybatis之ParameterHandler

mybatis-3.4.6.release. ParementerHandler是个接口,如下List-1 List-1 public interface ParameterHandler { Object getParameterObject(); void setParameters(PreparedStateme......

克虏伯
40分钟前
6
0
Spark sql的批处理物理计划BatchScanExec

BatchScanExec是batch类的物理计划,对应的逻辑计划是DataSourceV2Relation,是Datasource。 它的入参是Scan类,Scan类有两个重要方法,一个获取分区列表信息;另一个方法获取读取器工厂。 ...

守望者之父
44分钟前
10
0
for循环与while循环

循环结构三要素 a. 初始值 b. 循环条件 c. 改变条件 for循环 声明格式 for(表达式1;表达式2;表达式3){ 循环体语句 } 表达式1:用来循环的变量初始值。(开始值) 表达式2:用来判断循环的条件。...

Lenat
50分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部