iframe元素就是文档中的文档。

window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象。但是，如果一个文档定义了一个或者多个框架(即：包含一个或者多个frame或者iframe标签)，浏览器就会为原始文档创建一个window对象，再为每个iframe创建额外的window对象，这些额外的window对象是原始窗口的子窗口。
contentWindow: 是指指定的iframe或者iframe所在的window对象

Demo1

父页面fu.html:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>父页面</title>

    </head>

    <body>

    <input type=button value="调用子页面中的函数childSay函数" onclick="callChild()">

    <iframe id="myFrame" src="zi.html"></iframe>

    <script type="text/javascript">

function parentSay() {

alert("我是父页面中的方法");

}

function callChild()

{

document.getElementById("myFrame").contentWindow.childSay();

}

    </script>

    </body>

</html>

子页面zi.html

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>子页面</title>

    </head>

    <body>

    <input type=button value="调用父页面中的parentSay()函数" onclick="callParent()">

    <script type="text/javascript">

function childSay()

{

alert("我是子页面的say方法");

}

function callParent() {

parent.parentSay();

}

    </script>

    </body>

</html>

Demo2

父页面iframe1.html:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>父页面与子页面之间的调用</title>

    </head>

    <body>

    <iframe src="http://localhost/iframe/iframe3.html" id="iframe3"></iframe>

    <iframe src="http://localhost/iframe/iframe2.html" id="iframe2"></iframe>

    <div class="iframe1">我是父页面</div>

    <script type="text/javascript">

    var iframe2=document.getElementById('iframe2');

    iframe2.onload=function(){//父页面调用子页面中的方法

        iframe2.contentWindow.b();

    };

    function test2() {

        console.log("我是父页面中的方法，在子页面中调用的");

        return iframe2;

    }

    </script>

    </body>

</html>

子页面iframe2.html:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>子页面</title>

    </head>

    <body>

    <div id="test">aaa</div>

    <div class="iframe2">子页面</div>

    <script type="text/javascript">

    //子页面iframe2.html调用父页面iframe1.html的函数:

     parent.test2();

      function b(){

           console.log("我是子页面iframe2");

       }

       function c() {

           console.log("iframe3页面调用iframe2页面");

       }

    </script>

    </body>

</html>

子页面iframe3.html:

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>iframe3</title>

    </head>

    <body>

    <script type="text/javascript">

    var iframe2=parent.test2();

    iframe2.contentWindow.c();//iframe3调用iframe2中的方法

    </script>

    </body>

</html>

Demo2也实现了子页面与子页面之间相互调用。

Iframe父页面与子页面之间的相互调用的更多相关文章

  1. 前端vue框架 父组件与子组件之间的相互调用

    子组件调用父组件东西: 1.在父组件与子组件契合的标签的的template模板中绑定 v-bind:自定义一个名字=“要调用的名字” 2.在子组件的script中props:["自定义的名字 ...

  2. iframe父窗口和子窗口之间的调用

    1>父窗口获取子窗口 js方法 document.getElementById('if1').contentWindow.document: window.frames["if1&qu ...

  3. Iframe父页面与子页面之间的调用

    原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打 ...

  4. iframe 框架 父页面与子界面之间的变量、函数、元素获取

    1.获取页面上的iframe 1-1. document.getElementById('iframeId'): 1-2. window.frames[0].window.frames['frameN ...

  5. IFrame父页面和子页面的交互

    现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...

  6. js父页面和子页面之间传值

    今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...

  7. 使用iframe父页面调用子页面和子页面调用父页面的元素与方法

    在实际的项目开发中,iframe框架经常使用,主要用于引入其他的页面.下面主要介绍一下使用iframe引入其他页面后,父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素. 1.父页面 ...

  8. JQuery操作iframe父页面与子页面的元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...

  9. iframe父页面与子页面赋值

    最近因为公司之前的系统用iframe,里面的高度不能自适应,导致了很多问题,今天特意拿来研究一下,从网上找了一些方法试验了一下,这里记录一下成功的方法 1.父页面获取子页面的高度,并给父页面赋值 父页 ...

随机推荐

  1. C++通过ADO读写Excel文件

    介绍 有时候我们需要从excel表格里导入.导出数据.其中一种方式就是通过ADO的方式.在这里,excel文件被当作数据库来处理,该方式不需要客户端安装Microsoft Excel,速度也够快. 连 ...

  2. Spring Boot应用的后台运行配置

    酱油一篇,整理一下关于Spring Boot后台运行的一些配置方式.在介绍后台运行配置之前,我们先回顾一下Spring Boot应用的几种运行方式: 运行Spring Boot的应用主类 使用Mave ...

  3. 【Python&数据结构】 抽象数据类型 Python类机制和异常

    这篇是<数据结构与算法Python语言描述>的笔记,但是大头在Python类机制和面向对象编程的说明上面.我也不知道该放什么分类了..总之之前也没怎么认真接触过基于类而不是独立函数的Pyt ...

  4. 【BootStrap】 概述 & CSS

    BootStrap BootStrap由Twitter开发,基于HTML,CSS,JS,是一套前端框架.它的特点是对浏览器良好的支持(目前市面上所有流行浏览器都可以),兼容移动设备,以及响应式设计(响 ...

  5. 数据库 --> sqlite3之api使用

    创建 if [ ! -d /opt/dbspace ] then mkdir /opt/dbspace fi if [ -f /opt/dbspace/.memo.db ] then rm /opt/ ...

  6. ReflectASM-invoke，高效率java反射机制原理

    前言:前段时间在设计公司基于netty的易用框架时,很多地方都用到了反射机制.反射的性能一直是大家有目共睹的诟病,相比于直接调用速度上差了很多.但是在很多地方,作为未知通用判断的时候,不得不调用反射类 ...

  7. Java中的序列化与反序列化

    序列化定义 将对象转换为字节流保存起来,并在以后还原这个对象,这种机制叫做对象序列化. 将一个对象保存到永久存储设备上称为持久化. 一个对象要想能够实现序列化,必须实现java.io.Serializ ...

  8. xpath获取下一页,兄弟结点的妙用

    第一页的情况: 第四页的情况 : 文章的链接:  http://tech.huanqiu.com/science/2018-02/11605853_4.html 从上面我们可以看到,如果仅仅用xpat ...

  9. 记录python接口自动化测试--unittest框架基本应用(第二目)

    在第一目里写了几个简单demo,并把调用get和post请求的方法封装到了一个类里,这次结合python自带的unittest框架,用之前封装的方法来写一个接口测试demo 1.unittest简单用 ...

  10. mysql数据库导入sql文件时提示“Error Code: 1153 - Got a packet bigger than 'max_allowed_packet' bytes”解决办法

    向mysql数据库中导入sql文件时,如果文件过大(几百M),会提示"Error Code: 1153 - Got a packet bigger than 'max_allowed_pac ...