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 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
代码触发js事件(click、change)示例应用
Dec 13 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 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 has encountered an Access Violation
2007/01/15 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
基于PHP实现数据分页显示功能
2016/05/26 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
Python绘制热力图示例
2019/09/27 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
大学生自荐信
2013/12/11 职场文书
网络工程师职业规划
2014/02/10 职场文书
寄语学生的话
2014/04/10 职场文书
安全演讲稿开场白
2014/08/25 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
创业计划书之面包店
2019/09/12 职场文书