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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
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生成月历代码
2007/06/14 PHP
深入php多态的实现详解
2013/06/09 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
js中cookie的使用详细分析
2008/05/28 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
JS验证码实现代码
2017/09/14 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中每次处理一个字符的5种方法
2015/05/21 Python
详解Python的Django框架中的中间件
2015/07/24 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
Python requests模块session代码实例
2020/04/14 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
置业顾问岗位职责
2014/03/02 职场文书
自我鉴定标准格式
2014/03/19 职场文书
护士节策划方案
2014/05/19 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
独生子女证明范本
2015/06/19 职场文书
2015年成本会计工作总结
2015/10/14 职场文书