解决 jQuery 实现父窗口和iframe父页面与子页面之间的传值的问题

解决 jQuery 实现父窗口

在框架中,我用 JavaScript 获取 JSON 数据,组织成 HTML 代码,最后将其填充至上层文档的一个元素中。

按照一般的写法,我们需要用到类似如下的语句:

1.window.parent.document.getElementById("myEle").innerHTML = html;

使用 jQuery ,写法如下:
2.$("#myEle", window.parent.document).html(html);

即指明了是在 window.parent.document 中查找 id=myEle 的元素。

随着前面的问题的解决(其实是对 jQuery 的了解不够),现在两种方案都可以实现我需要的效果了。

3.parent.$("#myEle").html(html);
这种方法要求父文档也要调用 jQuery 。

iframe父页面与子页面之间的传值问题

一、父页面给iframe中的子页面传值,把值写入子页面的文本框里



father.html

<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>  
<script type="text/javascript">  
function fuzhi()  
{  
    $('#son').contents().find("#b").val("父页面传过来的值!");   
}  
</script>  
 

<iframe id="son" name="son" src="son.html" width="400" height="200"></iframe><br />  
<input type="button" value="给子页面表单中id为b的文本框赋值" onclick="fuzhi()" /> 

son.html

<form name="form2"><input type="text" name="b" id="b" /></form>

二、子页面如何调用父页面中的函数



father.html

<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>  
<script type="text/javascript">  
function fun()  
{  
    alert('这是父页面中的函数弹出窗口哦!');  
}  
</script>   
<iframe id="son" name="son" src="son.html" width="400" height="200"></iframe>
son.html

<script type="text/javascript">  
function diaoyong()  
{      
    $(window.parent.fun());  //调用父页面函数  
}  
</script>  
<form name="form2"> 
      <input name="btn1" type="button" onclick="diaoyong()" value="调用父页面中的函数" />
</form>

三、iframe中的子页给父页面传值

father.html

<script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>  
<div id="messagediv">test</div>  
<iframe id="son" name="son" src="son.html" width="400" height="200">
</iframe>
son.html

<script type="text/javascript">  
function fuzhi()  
{  
    (window.parent.("#messagediv").html("子页面赋过来的值"));  
}  
</script>  
<form name="form2">
      <input name="btn1" type="button" onclick="fuzhi()" value="给父页中id为messagediv的元素赋值" />
</form>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,879评论 1 45
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,494评论 0 44
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,372评论 0 3
  • jQuery jQuery是JavaScript世界中使用最广泛的一个库。 jQuery这么流行,肯定是因为它解决...
    星腾_范特西阅读 2,117评论 0 27
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 676评论 0 3