关于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 相关文章推荐
mailto的使用技巧分享
Dec 21 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
js实现网页收藏功能
Dec 17 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
Vue 幸运大转盘实现思路详解
May 06 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
JS数组转字符串实现方法解析
Sep 04 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
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
2014/01/12 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
详细解读Python中解析XML数据的方法
2015/10/15 Python
python八皇后问题的解决方法
2018/09/27 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
用python制作个视频下载器
2021/02/01 Python
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android