jQuery实现iframe父窗体和子窗体的相互调用


Posted in Javascript onJune 17, 2016

本文实例讲述了jQuery实现iframe父窗体和子窗体的相互调用方法。分享给大家供大家参考,具体如下:

父窗体

<html>
  <head>
    <title>usually function</title>
  </head>
  <body>
    <iframe src="http://www.baidu.com" ></iframe>
    <iframe src="myifame.html" id="name_iframe" name="name_iframe"></iframe>
    <button value="buttonvalue" id="testid">buttonvalue</button>
  </body>
<html>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script>
//contentWindow这个属性,相当于获取iframe网页里面的window对象
$(function(){
  //父窗体获取子窗体的变量
  alert(document.getElementById("name_iframe").contentWindow.vname);//父窗体获取子窗体的方法
  document.getElementById("name_iframe").contentWindow.test();//父窗体获取子窗体的内容
  alert(document.getElementById("name_iframe").contentWindow.document.body.outerHTML);
});
var myname="hb";
function parentFunction(){
  alert("parentFunction");
}
</script>

子窗体

<html>
  <head>
    <title>usually function</title>
  </head>
  <body>
    <button onclick="getParentContent()">getParentContent</button>
  </body>
<html>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script>
var vname="v_name";
function test(){
  alert("function test");
}
function getParentContent(){
  //获取父窗体的变量
  alert(window.parent.myname);
  //获取父窗体的方法
  window.parent.parentFunction();
  //获取父窗体的dom节点
  alert(parent.document.getElementById("testid").value);
}
</script>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript 键盘keyCode键码值表
Dec 24 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
Notify - 基于jquery的消息通知插件
Oct 18 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
简单了解JavaScript异步
May 23 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
Vuex实现数据增加和删除功能
Nov 11 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 #Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 #Javascript
jquery实现简单Tab切换菜单效果
Jul 17 #Javascript
特殊日期提示功能的实现方法
Jun 16 #Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 #Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 #Javascript
客户端验证用户名和密码的方法详解
Jun 16 #Javascript
You might like
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
浅谈js的异步执行
2016/10/18 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
CSS3 简写animation
2012/05/10 HTML / CSS
意大利在线药房:Saninforma
2021/02/11 全球购物
药学专业学生的自我评价分享
2014/02/06 职场文书
新农村建设典型材料
2014/05/31 职场文书
实习生工作证明范本
2014/09/14 职场文书
邀请函范文
2015/02/02 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
工作建议书范文
2019/07/08 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android