关于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 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
js确定对象类型方法
Mar 30 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 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生成HTML静态页面实例代码
2008/08/31 PHP
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
python异步Web框架sanic的实现
2020/04/27 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
银行门卫岗位职责
2013/12/29 职场文书
三年级音乐教学反思
2014/01/28 职场文书
校长先进事迹材料
2014/02/01 职场文书
师范类求职信
2014/06/21 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
详解Python常用的魔法方法
2021/06/03 Python
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android