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

  • jQuery获取URL传递的参数

    URL传递参数是程序开发中经常用到的,中国网页设计给大家分享使用jQuery如何获取URL传递的参数。 例如要获取下面URL地址中的参数: http://www.125jz.com?id=”2020″&title=”jQuery获取URL传递的参数” 实现代码如下: //获取URL参数a和b funct…

    2018年9月30日
    1.4K0
  • 鼠标放上去,图片上方动态显示半透明说明文字(源码)

    <style> .itemInWorks{ width: 240px; height: 150px; border-radius:5px; font-size: 20px; font-weight: 600; color: #FFFFFF; text-align: center; line-height: 40px; background: ur…

    2020年2月20日
    1.9K0
  • CSS常用类/ID命名规范

    书写规范请查看《CSS语法及命名规范(入门)》,本文介绍常用类/ID命名规范,CSS文件命名规范,如页面主体:main 内容:content 标签页:tab  章列表:list 信息:msg   标题:title   热点:hot 新闻:news注册:regsiter 合作伙伴:partner 友情链接:friendlink 页脚:footer 版权:cop…

    2019年3月14日
    4.1K0
  • CSS进阶,4个案例入门,学会LESS使用

    Less 简介 什么是LESSCSS LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。 Less语言特性 LESS的变量 变量允许我们单独定义一系列通用的样式…

    2019年7月17日
    1.3K0
  • 给网页中的按钮和图片添加声音

    Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

    2018年2月6日
    3.6K0
  • 网页中的框架(详解)

    所谓框架便是网页画面分成几个框窗,同时取得多个 URL。 一、制作框架页面的步骤: 1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接,在子框架中设定链接。 注意:框架页面是不含标签的 二、基本语法 <frameset> <frame src=”url”> <noframes&g…

    2020年4月11日
    8.8K0

发表回复

登录后才能评论