关于Iframe父页面与子页面之间的相互调用


Posted in Javascript onNovember 22, 2016

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父页面与子页面之间的相互调用全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
jquery实现图片预加载
Dec 25 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 #Javascript
老生常谈原生JS执行环境与作用域
Nov 22 #Javascript
JS中位置与大小的获取方法
Nov 22 #Javascript
javascript中Date对象的使用总结
Nov 21 #Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 #Javascript
使用Angular.js实现简单的购物车功能
Nov 21 #Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 #Javascript
You might like
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
Python ldap实现登录实例代码
2016/09/30 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
python动态进度条的实现代码
2019/07/03 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
华丽的手绘陶瓷:MacKenzie-Childs
2017/02/04 全球购物
NET程序员上机面试题
2015/05/23 面试题
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
初一新生军训方案
2014/05/22 职场文书
会计求职自荐信
2014/06/20 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
交通安全横幅标语
2014/10/07 职场文书
2014年司法所工作总结
2014/11/22 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
党员廉政准则心得体会
2016/01/20 职场文书
人力资源部工作计划
2019/05/14 职场文书