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之ESC(第二类混淆)
May 06 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
vue之将echart封装为组件
Jun 02 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
php框架Phpbean说明
2008/01/10 PHP
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
js自带函数备忘 数组
2006/12/29 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
Python实现分段线性插值
2018/12/17 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
python和php哪个容易学
2020/06/19 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
SQL Server面试题
2016/10/17 面试题
会计电算化应届生求职信
2013/11/03 职场文书
益达广告词
2014/03/14 职场文书
小学生倡议书范文
2014/05/13 职场文书
护士工作失误检讨书
2014/09/14 职场文书
2014年施工员工作总结
2014/11/18 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
入团申请书格式
2019/06/20 职场文书
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python