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函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
详解如何较好的使用js
Dec 16 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 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下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
详解Angular路由之路由守卫
2018/05/10 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
[01:03:09]完美世界DOTA2联赛PWL S2 Forest vs SZ 第二场 11.25
2020/11/26 DOTA
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
python爬取youtube视频的示例代码
2021/03/03 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
星空联盟C# .net笔试题
2014/12/05 面试题
政治思想表现评语
2014/05/04 职场文书
公司领导班子对照材料
2014/08/18 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015选调生工作总结
2015/07/24 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
JAVA springCloud项目搭建流程
2022/05/11 Java/Android