关于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源码解读之hasClass()方法分析
Feb 20 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
详解package.json版本号规则
Aug 01 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
vue使用原生swiper代码实例
Feb 05 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
屏蔽浏览器缓存另类方法
2006/10/09 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
PHP实现多图片上传类实例
2014/07/26 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
Vue实现日历小插件
2019/06/26 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中的类与对象之描述符详解
2015/03/27 Python
Python定时任务sched模块用法示例
2018/07/16 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
python dataframe NaN处理方式
2019/12/26 Python
python数据爬下来保存的位置
2020/02/17 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
小结Python的反射机制
2020/09/28 Python
浅析Python中字符串的intern机制
2020/10/03 Python
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
乡镇信息公开实施方案
2014/03/23 职场文书
努力学习演讲稿
2014/05/10 职场文书
党的生日演讲稿
2014/09/10 职场文书
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电