zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Java for LeetCode 229 Majority Element II
    Java for LeetCode 228 Summary Ranges
    Java for LeetCode 227 Basic Calculator II
    Java for LintCode 颜色分类
    Java for LintCode 链表插入排序
    Java for LintCode 颠倒整数
    Java for LintCode 验证二叉查找树
    Java for LeetCode 226 Invert Binary Tree
    Java for LeetCode 225 Implement Stack using Queues
    Java for LeetCode 224 Basic Calculator
  • 原文地址:https://www.cnblogs.com/daijun/p/6102599.html
Copyright © 2011-2022 走看看