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 相关文章推荐
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
jsonp原理及使用
Oct 28 Javascript
jquery常用操作小结
Jul 21 Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
js实现分割上传大文件
Mar 09 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 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使用sql数据库 获取字段问题介绍
2013/08/12 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
ES6的新特性概览
2016/03/10 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
TypeScript入门-接口
2017/03/30 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
python实现提取百度搜索结果的方法
2015/05/19 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
Linux下多个Python版本安装教程
2018/08/15 Python
使用tensorflow实现线性回归
2018/09/08 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
详解python数据结构和算法
2019/04/18 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
python 深度学习中的4种激活函数
2020/09/18 Python
Python如何获取文件路径/目录
2020/09/22 Python
美国家具网站:Cymax
2016/09/17 全球购物
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
土木工程毕业生自荐信
2013/09/21 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
安全教育第一课观后感
2015/06/17 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python