zoukankan      html  css  js  c++  java
  • 实例讲解iframe之间以及父窗体的函数调用传值

    http://blog.csdn.net/spring21st/article/details/6338554

    先上我写的示例:

    实现效果: 当在iframe1 中输入值后,点击赋值按钮,在iframe2的文本框显示出iframe的值。

    index.html

    [xhtml] view plaincopy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head></head>  
    4.     <body>  
    5.         <input type="hidden" id="txt_index" name="txt_index" value=""/>  
    6.         <iframe src="iframe1.html" mce_src="iframe1.html" name="mainframe1" frameborder="0"></iframe>  
    7.         <iframe src="iframe2.html" mce_src="iframe2.html" name="mainframe2" frameborder="0"></iframe>  
    8.     </body>  
    9. </html>  

    iframe1.html

    [xhtml] view plaincopy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head></head>  
    4.     <body>  
    5.         <p>iframe1</p>  
    6.         <input type="text" name="txt_if1" id="txt_if1" />  
    7.         <button onclick="javascript:setValue();">赋值</button>  
    8.     </body>  
    9.       
    10.     <mce:script type="text/javascript"><!--  
    11.         function setValue(){  
    12.             // 获取iframe1 文本框值  
    13.             var txt_if1 = document.getElementById("txt_if1");  
    14.           
    15.             // 获取父窗体text  
    16.             var txthidden = parent.document.getElementById("txt_index");  
    17.               
    18.             // 将iframe1 值赋值给父窗体  
    19.             txthidden.value = txt_if1.value;  
    20.               
    21.             // 将iframe2的文本框赋值  
    22.             parent.frames['mainframe2'].document.getElementById("txthid").value = txthidden.value;  
    23.         }  
    24.       
    25. // --></mce:script>  
    26. </html>  

    iframe2.html

    [xhtml] view plaincopy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head></head>  
    4.     <body>  
    5.         <p>iframe2</p>  
    6.         <input name="txthid" id="txthid" type="text" />  
    7.     </body>  
    8. </html>  

    然后咱们再系统的了解下传值方法:

     

    在父页面访问Iframe子窗体的txtAddress控件 
    window.frames["ifrMapCompanyDetails"].document.all("txtAddress").value = '地址' ; 


    在Iframe子窗体1访问父页面的TextBox1控件 , 子窗体1把值赋给子窗体2的某个控件 
    string strValue = "从子窗体传递给父页面的值" ; 
    下面是在Page_Load事件里面调用的,当然可以写在javascript脚本里面 
    this.Response.Write("<script>parent.document.all('TextBox1').value = '" + strValue + "';</script>"); 
    this.Response.Write("<script>if( parent.document.all('TextBox2').value = '0')parent.document.all('TextBox1').value = '44';</script>"); 

    子窗体访问父窗体中的全局变量: 
    parent.xxx; 


    在Iframe子窗体1访问子窗体2的txtAddress控件 子窗体1把值赋给子窗体2的某个控件 
    window.parent.frames["ifrMapCompanyDetails"].document.all("txtAddress").value = '地址' ; 


    父窗体提交两个Iframe子窗体 
    window.frames["ifrMapCompanyDetails"].Form1.submit(); 
    window.frames["ifrMapProductInfoDetails"].Form1.submit(); 

    Iframe子窗体 调用父页面的javascript事件 
    window.parent.XXX() 

    //父页面调用当前页面中IFRAME子页面中的脚本childEvent 
    function invokechildEvent() 
    { var frm = document.frames["ifrChild1"].childEvent(); } 
    或者调用当前页面中第一个IFRAME中的脚本childEvent 
    { var frm = document.frames[0]; frm.childEvent(); } 

    //子页面调用父窗体的某个按钮的按钮事件 
    window.parent.Form1.btnParent.click() 

    父页面调用子窗体的某个按钮的按钮事件 
    window.frames['ifrChild1'].document.all.item("btnChild3").click(); 


    //jquery 部分: 
    1.在父窗口中操作 选中IFRAME中的所有单选钮 
    $(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked","true"); 

    2.在IFRAME中操作 选中父窗口中的所有单选钮 
    $(window.parent.document).find("input[@type='radio']").attr("checked","true");

  • 相关阅读:
    Linux 文件和目录的属性
    关于样式加载顺序,js加载顺序
    关于css切换菜单
    jquery插件编写思路
    京东中关于领券地址的安全处理
    把js写到链接a标签的href中和写到onclick中的区别
    京东中关于jsonp的运用
    关于Jquery中ajax方法data参数用法的总结
    js中的延迟加载
    Jquery版Ajax利用JSONP 跨域POST/GET传输数据研究
  • 原文地址:https://www.cnblogs.com/studyshine/p/3272910.html
Copyright © 2011-2022 走看看