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 闭包
Sep 15 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
JavaScript实现移动端轮播效果
Jun 06 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
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
paypal即时到账php实现代码
2010/11/28 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
php上传大文件设置方法
2016/04/14 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
python二叉树遍历的实现方法
2013/11/21 Python
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
python多进程共享变量
2016/04/06 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
Python异常的检测和处理方法
2018/10/26 Python
pycharm显示远程图片的实现
2019/11/04 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
python3 re返回形式总结
2020/11/20 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
篮球比赛策划方案
2014/06/05 职场文书
新法人代表任命书
2014/06/06 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
办理护照工作证明
2014/10/10 职场文书
音乐教师求职信范文
2015/03/20 职场文书
Pytorch使用shuffle打乱数据的操作
2021/05/20 Python
python 爬取天气网卫星图片
2021/06/07 Python
Nginx利用Logrotate实现日志分割
2022/05/20 Servers