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. Redis 慢日志

    redis的slowlog是redis用于记录记录慢查询执行时间的日志系统.由于slowlog只保存在内存中,因此slowlog的效率很高,完全不用担心会影响到redis的性能.Slowlog是Red ...

  2. linux拓展下：批量改扩展名的方法

    [root@oldboy oldboy]# ll total 0 -rw-r--r-- 1 root root 0 Nov 13 19:38 stu_102999_1_.jpg -rw-r--r-- ...

  3. 云服务器Windows Server2012 配置http服务器(又称Web服务器，IIS)

    出错:无法打开运行空间池.服务器管理器WinRM插件可能已损坏或丢失. 解决方法: http://shiyousan.com/post/636308065767125916 第一步是开启WinRM服务 ...

  4. Django+xadmin打造在线教育平台（八）

    十一.用户信息 11.1.个人信息展示 (1)新建‘usercenter-bae.html’当母板 {% load staticfiles %} <!DOCTYPE html> <h ...

  5. Java基础学习笔记九 Java基础语法之this和super

    构造方法 我们对封装已经有了基本的了解,接下来我们来看一个新的问题,依然以Person为例,由于Person中的属性都被private了,外界无法直接访问属性,必须对外提供相应的set和get方法.当 ...

  6. hackme.inndy.tw - pyyy - Writeup

    hackme.inndy.tw - pyyy - Writeup 0x01 反编译 1.第一次尝试的时候我直接在线反编译,部分结果如下. for (i, f) in enumerate(F): n = ...

  7. 学号：201621123032 《Java程序设计》第14周学习总结

    1:本周学习总结 2:使用数据库技术改造你的系统 2.1:简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 建立一个图书馆的表 建立读者用户个人的借书信息表---但是目前没有办法做到 ...

  8. jsonp处理

    def loads_jsonp(self,_jsonp): try: return json.loads(re.match(".*?({.*}).*",_jsonp,re.S).g ...

  9. 【Swift】iOS裁剪或者压缩后出现的白边问题

    只需要将所有的CGFloat转化为NSInteger即可 func imageScaleSize(newSize: CGSize) -> UIImage{ let width = NSInteg ...

  10. scrapy 模拟登陆

    import scrapy import urllib.request from scrapy.http import Request,FormRequest class LoginspdSpider ...