zoukankan      html  css  js  c++  java
  • iframe中父页面与子页面的传值方法

    涉及到iframe传值的情况有这么几种:(1)父页面给iframe中的子页面传值(2)子页面调用父页面中的函数(3)iframe中的子页面给父页面传值(4)兄弟iframe之间的传值

    下面来逐一看一下:

    (1)父页面给iframe中的子页面传值 ,把值写入子页面的文本框中

    father.html

    1 <script language="javascript" src="http://www.aspbc.com/js/jquery.js" type="text/javascript"></script>  
    2 <script type="text/javascript">  
    3 function fuzhi()  
    4 {  
    5     $('#son').contents().find("#b").val("父页面传过来的值!");   
    6 }  
    7 </script>  
    8 <iframe id="son" name="son" src="son.html" width="400" height="200"></iframe><br /> 
    9 <input type="button" value="给子页面表单中id为b的文本框赋值" onclick="fuzhi()" />
    father.html

    son.html

    1 <form name="form2"><input type="text" name="b" id="b" /></form>
    son.html

    (2)子页面调用父页面中的函数 

    father.html

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

    son.html

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

    (3)iframe中的子页面给父页面传值

    father.html

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

    son.html

    1 <script type="text/javascript">  
    2 function fuzhi()  
    3 {  
    4     $(window.parent.$("#messagediv").html("子页面赋过来的值"));  
    5 }  
    6 </script>  
    7 <form name="form2"><input name="btn1" type="button" onclick="fuzhi()" value="给父页中id为messagediv的元素赋值" /></form>
    son.html
  • 相关阅读:
    些许注意事项(初学)
    第一个方法(初学)
    重载(初学)
    数组(初学)
    文件下载(初学)
    javaweb中上传视频,并且播放,用上传视频信息为例
    javaweb中上传图片并显示图片,用我要上传课程信息(里面包括照片)这个例子说明
    从后台servlet中,获取jsp页面输入的值,来删除用户一行信息
    第二式 观察者模式
    第一式 策略模式
  • 原文地址:https://www.cnblogs.com/lihuibin/p/9558349.html
Copyright © 2011-2022 走看看