iframe中子页和父页面如何传值

本文介绍了,父页面father.html和子页面son.html之间如何传值,子页面如何调用父页面中的函数等操作

本文介绍了,父页面father.html和子页面son.html之间如何传值。

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

father.html

<script src="http://libs.baidu.com/jquery/1.9.0/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 src="http://libs.baidu.com/jquery/1.9.0/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 src="http://libs.baidu.com/jquery/1.9.0/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>

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/10100.html

(0)
上一篇 2021年11月30日 上午8:36
下一篇 2021年12月1日 下午1:48

99%的人还看了以下文章

  • 手把手,永哥教你学会css sprite(雪碧图)技术

    css sprite又称雪碧图或css精灵。 雪碧图就是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更加友好。 css sprite优点: 有效减少网站的http请求数量,加…

    2018年2月20日
    4.3K0
  • 菜单或新闻列表最后一项的css处理小技巧:not(:last-of-type)

    网页开发时,导航菜单的最后一项或新闻列表的最后一项需要和前面其他项显示不同,如导航的最后一个菜单不再需要分隔符或右边的空白间距,新闻或文章列表的最后一项不需要底边距,列表一般都会有分割线,但是最后一个列表没有分割线等。 如文章列表如下: <ul class=’posts’> <li class=’post’> <h3>中国…

    2018年9月27日
    1.8K0
  • CSS3 transform:rotate()制作旋转图片

    在《CSS3 transition transform属性及实例详解》中我们实现了:鼠标放到图片上,图片等比例放大的效果,今天分享transform:rotate()制作旋转图片。 CSS3中的transform:rotate()可以实现旋转功能,可以在CSS里面设定旋转的角度,也可以设定旋转用多少时间来完成。 旋转图片HTML代码 <img src=…

    2019年1月29日
    3.4K1
  • PS图片转页面CSS+HTML的步骤

    标准的网页制作流程是:拿到网站美工制作的psd效果图后,网页设计师再把PS制作的图片转html页面。

    网页制作 2020年2月12日
    2.9K0
  • 纯CSS实现表格的自适应布局

    本文分享了一种用纯CSS实现的表格自适应布局,主要用到伪元素:before。

    2018年2月19日
    2.3K0
  • FLV视频播放代码及Flvplayer.swf播放器下载

    FLV是被众多新一代视频分享网站所采用,是目前增长最快、最为广泛的视频传播格式。 FLV 是FLASH VIDEO的简称,它形成的文件极小、加载速度极快,有效地解决了视频文件在网络上很好的使用等问题。 下面分享在网页制作时,插入FLV格式视频的代码(兼容主流浏览器): <object class id=”clsid:D27CDB6E-AE6D-11cf…

    2018年5月14日
    3.9K0

发表评论

登录后才能评论