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. Gradient Descent

    理自Andrew Ng的machine learning课程. 目录: 梯度下降算法 梯度下降算法的直观展示 线性回归中的梯度下降 前提: 线性回归模型 :$h(\theta_0,\theta_1)= ...

  2. phpcms v9 搜索结果列表页时间显示1970问题解决方案

    对于喜欢用phpcms v9 的小伙伴来说,在调用时间时,总会出现时间1970这样的问题,对于这个问题,网上的说法很多,内容页时间显示通常不会问题,搜索结果页就不行了,通过总结,发现使用{format ...

  3. css3 背景色 实现边框渐变运动动画

    css3 #body_id { animation: myfirst 10s ease-in-out -2s infinite alternate; /* Firefox: */ -moz-anima ...

  4. bootstrap 模态框（modal）插件使用

    今天用户登陆时,在原网页上弹出新登陆窗口,发现使用的是modal插件,记录下该插件的使用方法,手写强化下. 首先,模态框(modal)是覆盖在父窗体上的子窗体,目的是显示来自一个单独的源的内容,可以在 ...

  5. CSS2Properties doesn't have an indexed property setter for '0'

    使用React时,发现chrome浏览器没事,firefox火狐浏览器报了一个CSS2Properties doesn't have an indexed property setter for '0 ...

  6. Beta总结

    45°炸 031502601 蔡鸿杰 031502604 陈甘霖 031502632 伍晨薇 一.写在Beta项目前 Beta 凡 事 预 则 立 二.GitHub传送门 Beta冲刺重要版本 三.用 ...

  7. 弹幕视频播放app案例分析

    产品 哔哩哔哩动画 相对于其他视频播放软件来说,哔哩哔哩动画没有广告影响观看体验,而且内容更偏重于二次元,因此我更倾向于使用它. 第一部分 调研, 评测 #第一次上手体验 用起来还是比较方便,可以快速 ...

  8. ios中录音功能的实现AudioSession的使用

    这个星期我完成了一个具有基本录音和回放的功能,一开始也不知道从何入手,也查找了很多相关的资料.与此同时,我也学会了很多关于音频方面的东西,这也对后面的录音配置有一定的帮助.其中参照了<iPhon ...

  9. Visual Studio 开发工具常用的插件

    转载自落日故乡  http://www.spersky.com/post/vsPlugins.html 该博客中收集整理归纳了若干个常用的vs插件,比如高亮显示当前选择,垂直辅助线,折叠代码等等,具体 ...

  10. Xamarin控件使用之ListView

    listview单列多行的显示,以后再加多列多行的实例. [Activity(Label = "GraphicAll", LaunchMode = LaunchMode.Singl ...