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. 笔记：I/O流-内存映射文件

    内存映射文件时利用虚拟内存实现来将一个文件或者文件的一部分映射到内存中,然后整个文件就可以当作数组一样的访问,这个比传统的文件操作要快得多,Java 使用内存映射文件首先需要从文件中获取一个chann ...

  2. Vue之七导航守卫

    { path:'/',component:Recommend,beforeEnter: (to, from, next) => { console.log(to); ajax('get','/a ...

  3. 【Flask】微型web框架flask大概介绍

    Flask Flask是一个基于python的,微型web框架.之所以被称为微型是因为其核心非常简单,同时具有很强的扩展能力.它几乎不给使用者做任何技术决定. 安装flask时应该注意其必须的几个支持 ...

  4. 【BootStrap】 布局组件 II

    BootStrap 布局组件 II ■ 分页 BS中通过.pagination的ul元素来实现一个分页集合,一个典型的分页如下: <ul class="pagination" ...

  5. 总结linux路由技术

    Linux系统的route命令用于显示和操作IP路由表,要实现两个不同的网段之间的通信,需要一台连接两个网络的路由器,或者同时连接位于两个网络的网关来实现. 在Linux系统中,设置路由通常是为了解决 ...

  6. drbd(四)：drbd多节点(drbd9)

    1.drbd多节点简介 在drbd9以前,drbd一直只能配置两个节点,要么是primary/secondary,要么是primary/primary.虽然在这些版本上也能配置第三个节点实现三路节点的 ...

  7. 记录python接口自动化测试--把操作excel文件的方法封装起来(第五目)

    前面补充了如何来操作excel文件,这次把如何获取excel文件的sheet对象.行数.单元格数据的方法进行封装,方便后面调用 handle_excel.py# coding:utf-8 import ...

  8. 福州大学W班-个人最终成绩统计

    千帆竞发图 平时分: 项目分: 详细得分 平时分: 项目分: 个人最终得分:

  9. Beta 第一天

    一.今日任务 重新熟悉整体项目 对整个项目在未来的beta冲刺中进程有一个合理的规划 由于我们送出的是一个负责前端的成员,引入的也是一个负责前端工作的女生,(女生做起美工比起男生更加得心应手吧)所以我 ...

  10. 结对编程作业——四则运算GUI程序

    毛忠庆 201421122088 赵嘉楠 201421122065 源代码存放位置:https://gitee.com/ouwen0819/SiZeYunSuan.git 题目描述 使用 -n 参数控 ...