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的键盘控制事件说明
Apr 15 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
关于vue-router的那些事儿
May 23 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 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中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
php生成二维码
2015/08/10 PHP
php 常用的系统函数
2017/02/07 PHP
PHP生成推广海报的方法分享
2018/04/22 PHP
犀利的js 函数集合
2009/06/11 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
Python 多核并行计算的示例代码
2017/11/07 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
如何运行带参数的python脚本
2019/11/15 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
五年级科学教学反思
2014/02/05 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
区级文明单位申报材料
2014/05/15 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
清洁工个人工作总结
2015/03/05 职场文书
农村党员干部承诺书
2015/05/04 职场文书
南极大冒险观后感
2015/06/05 职场文书
在职证明格式样本
2015/06/15 职场文书
幼儿园六一主持词
2015/06/30 职场文书
幼儿教师师德培训心得体会
2016/01/09 职场文书
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers