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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
jquery validate使用攻略 第四步
Jul 01 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
100行代码实现vue表单校验功能(小白自编)
Nov 19 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 - Html Transfer Code
2006/10/09 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python编程中的文件操作攻略
2015/10/16 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
WxPython建立批量录入框窗口
2019/02/27 Python
在python中用url_for构造URL的方法
2019/07/25 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
毕业生欢送会主持词
2014/03/31 职场文书
小学班级特色活动方案
2014/08/31 职场文书
任命书怎么写
2015/03/02 职场文书
老公出轨后的保证书
2015/05/08 职场文书
摘录式读书笔记
2015/07/01 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书