关于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 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
vue导出html、word和pdf的实现代码
Jul 31 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
Python与R语言的简要对比
2017/11/14 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
Python3.5.3下配置opencv3.2.0的操作方法
2018/04/02 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
10行Python代码实现Web自动化管控的示例代码
2020/08/14 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
外贸学院会计专业应届生求职信
2013/11/14 职场文书
公司授权委托书范本
2014/04/03 职场文书
大型活动组织方案
2014/05/10 职场文书
小学学校评估方案
2014/06/08 职场文书
辅导员学期工作总结
2015/08/14 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js