jQuery实现iframe父窗体和子窗体的相互调用

 更新时间:2016年06月17日 09:10:43   作者:hbiao68  
这篇文章主要介绍了jQuery实现iframe父窗体和子窗体的相互调用,涉及jQuery窗体调用的相关技巧,需要的朋友可以参考下

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

  • jQuery 技巧大全(新手入门篇)

    jQuery 技巧大全(新手入门篇)

    jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的,它有助于简化 JavaScript&#8482; 以及Ajax 编程。
    2009-05-05
  • jQuery原理系列-css选择器的简单实现

    jQuery原理系列-css选择器的简单实现

    下面小编就为大家带来一篇jQuery原理系列-css选择器的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jquery用get实现ajax在ie里面刷新不进入后台解决方法

    jquery用get实现ajax在ie里面刷新不进入后台解决方法

    jquery用get实现ajax在ie里面刷新不进入后台的情况想必大家都有遇到过吧,下面与大家分享下具体的解决方法,希望对大家解决问题有所帮助
    2013-08-08
  • jQuery 跨域访问问题解决方法

    jQuery 跨域访问问题解决方法

    浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时地都要疼上一疼.记得很久以前使用iframe 加script domain 声明,yahoo js util 的方式解决二级域名跨域访问的问题.
    2009-12-12
  • jQuery中的siblings()是什么意思(推荐)

    jQuery中的siblings()是什么意思(推荐)

    siblings()方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。但是很多朋友不清楚jQuery中的siblings()是什么意思,今天小编给大家介绍下
    2016-12-12
  • 使用prop解决一个checkbox选中后再次选中失效的问题

    使用prop解决一个checkbox选中后再次选中失效的问题

    下面小编就为大家带来一篇使用prop解决一个checkbox选中后再次选中失效的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • jQuery实现的分页功能示例

    jQuery实现的分页功能示例

    这篇文章主要介绍了jQuery实现的分页功能,结合实例形式较为详细的分析了jQuery实现分页功能的具体步骤及相关操作技巧,包括前台样式、布局及jQuery分页插件的调用方法,需要的朋友可以参考下
    2017-01-01
  • jQuery实现的数值范围range2dslider选取插件特效多款代码分享

    jQuery实现的数值范围range2dslider选取插件特效多款代码分享

    这篇文章主要介绍了jQuery实现的数值范围range2dslider选取插件特效,整体特效非常逼真自然,推荐给大家,有需要的小伙伴可以参考下
    2015-08-08
  • Jquery为DIV添加click事件的简单实例

    Jquery为DIV添加click事件的简单实例

    下面小编就为大家带来一篇Jquery为DIV添加click事件的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • Jquery 模板数据绑定插件的使用方法详解

    Jquery 模板数据绑定插件的使用方法详解

    本篇文章是对在Jquery中模板数据绑定插件的使用方法进行了详细的分析介绍,需要的朋友参考下
    2013-07-07

最新评论