关于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 相关文章推荐
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
详解javascript事件冒泡
Jan 09 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
微信小程序实现点击图片放大预览
Oct 21 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中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
浅谈javascript回调函数
2014/12/07 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
JS实现分页导航效果
2020/02/19 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
python机器学习之贝叶斯分类
2018/03/26 Python
python模块smtplib学习
2018/05/22 Python
python实现飞机大战微信小游戏
2020/03/21 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
详解python中sort排序使用
2019/03/23 Python
Python collections模块使用方法详解
2019/08/28 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
Python 下载及安装详细步骤
2019/11/04 Python
python实发邮件实例详解
2019/11/11 Python
详解Python中的分支和循环结构
2020/02/11 Python
python与js主要区别点总结
2020/09/13 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
惠普香港官方商店:HP香港
2019/04/30 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
餐饮收银员岗位职责
2014/02/07 职场文书
批评与自我批评材料
2014/02/15 职场文书
纠风工作实施方案
2014/03/15 职场文书
碧霞祠导游词
2015/02/09 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers