• [HTML]HTML框架IFrame下利用JS在主页面和子页面间传值


    今天写的程序涉及到JS框架传值的问题,这些是我找到的一些资料
     
    下面主页面和子页面互相传值的DEMO 如果仅仅需要子页面触发主页面的函数 仅需 [ parent.window.你的函数 ] 就可以了
     
    DOM方法:
    父窗口操作IFRAME:window.frames["iframeSon"].document
    IFRAME操作父窗口: window.parent.document

    jquery方法:
    在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["iframeSon"].document).find(”:text”);
    在IFRAME中操作 选中父窗口中的所有输入框:$(window.parent.document).find(”:text”);

    iframe框架的HTML:<iframe src=”test.html” id=”iframeSon” width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>
    细心的朋友一下就能理解,原理其实很简单,就是用到了$(DOM对象)转换成jquery对象。


    例子:
    主页面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>主页面</title>
        <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
            function showSubValue(){
    
                alert( window.frames[0].document.getElementById("zhe").value);
    //var v = window.frames[0].document.getElementByIdx_x("subdiv1").innerHTML;
    //alert(v);
    //   http://hi.baidu.com/bigideaer/blog/item/780337e6af39933d2df534ff.html
               // var o = $(window.frames[0].document).find(":div#subdiv1");
               // alert(o.html());
            }
        </script>
    </head>
    <body>
    <div id="mainDiv">主页面测试数据</div>
    <input type="button" value="查看子页面数据" onclick="showSubValue();"/>
    <iframe src="zi.html" width="300" height="300"></iframe>
    </body>
    </html>



    子页面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
        <title>子页面</title>
        <script type="text/javascript">
            function showMainValue(){
    //dom方式
    var v = window.parent.document.getElementById("mainDiv").innerHTML;
    alert(v);
    
    window.parent.document.getElementById("mainDiv").innerHTML = "修改后的主页面数据";
    
    
    //jquery方式
    //            var o = $(window.parent.document).find(":div#mainDiv");
      //          alert(o.html());
            }
        </script>
    </head>
    <body>
    <div id="subdiv1" >子页面测试数据</div>
    <input type="button" id="zhe" value="显示父页面数据" onclick="showMainValue();"/>
    </body>
    </html>
  • 相关阅读:
    Java
    数据同步方案(附Java源码)
    windows下强大的wmic命令行工具
    利用dokan作虚拟磁盘开发
    用apache配置多个tomcat webapp
    apache2.2+tomcat配置[转]
    tomcat webdav
    Modbus/TCP
    AI语音验证码识别
    Win10 重命名文件夹:找不到指定文件。
  • 原文地址:https://www.cnblogs.com/lyggqm/p/5691480.html
Copyright © 2020-2023  润新知