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 获取当前时间戳的代码
Aug 05 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
微信小程序 如何保持登录状态
Aug 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中DateTime的常用方法
2016/08/11 PHP
Symfony查询方法实例小结
2017/06/28 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
js实现双色球效果
2020/08/02 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
Python greenlet实现原理和使用示例
2014/09/24 Python
Python入门篇之条件、循环
2014/10/17 Python
Python OS模块常用函数说明
2015/05/23 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Python中os模块功能与用法详解
2020/02/26 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
python全栈开发语法总结
2020/11/22 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
网站创业计划书
2014/04/30 职场文书
老人节主持词
2015/07/04 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android