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%的人还看了以下文章

  • js验证表单验证,包括用户名、密码、确认密码等,用户注册页面实例

      本文是js验证表单输入的入门级教程,要求你会基础的HTML,JS知识。 页面HTML 表单代码: <form action=”” method=”post” enctype=”multipart/form-data” name=”reg_form”> <div class=”info_input”> <div cl…

    2019年9月5日
    5.4K0
  • 纯CSS制作热门文章排行,且前3名背景不同

    要制作文章排行前10、或评论排行榜1、2、3、4…,还要给前三名加上不同的背景,可以用纯css实现(用Ol,li),但通常网页制作中使用ul的比较多,因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示,容易引起浏览器兼容问题,所以遇到这样的有序排版布局,最简单是将序号切成背景图片! 使用ul li实现文章排行有序排版布局。   htm…

    2018年7月14日
    3.0K0
  • 3种纯CSS/jquery实现的表格隔行变色,鼠标悬停:hover变色效果

    表格隔行显示不同背景颜色,表格奇数行和偶数行交替显示不同的背景颜色。 一、纯CSS3实现表格隔行变色 关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…

    2018年9月5日
    3.9K0
  • 第10课:外边距和内边距

    上一课,你学习了盒状模型。在这一课,我们将了解如何通过设置margin(外边距)和padding(内边距)这两个CSS属性来改变元素的显示。 为元素设置外边距 为元素设置内边距 为元素设置外边距 一个元素有上(top)、下(bottom)、左(left)、右(right)四个边。外边距(margin)表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可…

    2020年2月25日
    2.0K0
  • 响应式布局和自适应的区别

    客户端,PC、平板、手机,各种尺寸,要给电脑PC和手机分别设计不同的网页吗?要给每一个手机分别设计一个网页吗? 不需要,因为有了响应式布局。 响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。。 响应式布局和自适应的区别: 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。 手机的屏幕比较小,宽度通常在600像素以下,pc…

    2019年10月15日
    2.1K0
  • JavaScript 向数组的开头或末尾添加元素:unshift() 、push()方法详解

    unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。 unshift() 实例: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>uns…

    2018年9月5日
    13.7K0

发表回复

登录后才能评论