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. 排序算法Java实现（堆排序）

    算法描述:对于给定的n个记录,初始时把这些记录看作一棵顺序存储的二叉树,然后将其调整为一个大顶堆,然后将堆的最后一个元素与堆顶元素进行交换后,堆的最后一个元素即为最大记录:接着将前(n-1)个元素重新 ...

  2. 【Linux】 用户管理

    Linux用户管理 ■ 查看用户整体情况 cat /etc/passwd可以查看用户的一些基本信息.用finger <user>似乎更加方便 查看某一个特定的用户的话就可以 grep &l ...

  3. 【JS】 Javascript与BOM的互动 寻路

    JS BOM 之前提到过JS和DOM之间的互动方法.而BOM(Browser Object Module)是浏览器的对象模型,它也可以和JS进行互动.也就是说,JS还可以和浏览器进行互动.因为现代主流 ...

  4. 源码实现 --> strdel

    删除字符串中某个字符strdel 函数 char *strDel(char* str,const char chToDel) 不是库里面的函数,自己实现的原型,删除str中所有的chToDel字符. ...

  5. linq分组求和_实体类和datatable

    1.数据分组求合,分别用的实体类以及datatable来分组求合,还有分组求和之后的如何取值 //实体类版本 List<ProgramTimeModel> TotalAllList = G ...

  6. Python中安装模块的方法

    1.*nix系统上有一个地方专门有一个地方来放置安装的Python模块 比如在Mac上,这个目录的路径为: /usr/lib/python2.7 将要安装的文件拷贝到这里即可 2.下载模块包,解压后, ...

  7. 敏捷冲刺每日报告——Day1

    1.情况简述 Alpha阶段第一次Scrum Meeting 敏捷开发起止时间 2017.10.25 00:00 -- 2017.10.26 00:00 讨论时间地点 2017.10.25晚9:30, ...

  8. MySort实验报告

    实验日期:2017.5.2 实验内容:利用sort方法对已给的数据进行重新排序. 实验原图: 对原代码进行添加,补充新的内容: 在for循环中,新输入一个变量j,并新定义新的长度toSort.leng ...

  9. Network in Network

     论文要点: 用更有效的非线性函数逼近器(MLP,multilayer perceptron)代替 GLM 以增强局部模型的抽象能力.抽象能力指的模型中特征是对于同一概念的变体的不变形. 使用 gl ...

  10. ll的命令后面的字段详解

    linux学习 命令ll后字段的解释 分类:linux | 标签: 命令ll后字段的解释  2010-10-25 15:47阅读(4513)评论(0) ls -l 列表信息详解 我们平时用ls -l ...