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面向对象编程 for Cookie
Sep 19 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
jQuery老黄历完整实现方法
Jan 16 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
论JavaScript模块化编程
Mar 07 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
php程序之die调试法 快速解决错误
2009/09/17 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
javascript基本算法汇总
2016/03/09 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
Python Django框架模板渲染功能示例
2019/11/08 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
农民工创业典型事迹
2014/01/25 职场文书
干部现实表现材料
2014/02/13 职场文书
水电站项目建议书
2014/05/12 职场文书
就业协议书样本
2014/08/20 职场文书
综治工作汇报材料
2014/10/27 职场文书
安全教育培训心得体会
2016/01/15 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
python面向对象版学生信息管理系统
2021/06/24 Python
python如何查找列表中元素的位置
2022/05/30 Python