zoukankan      html  css  js  c++  java
  • HTML框架IFrame结合JS在主页面和子页面间传值

    下面主页面和子页面互相传值的DEMO 如果仅仅需要子页面触发主页面的函数 仅需 [ parent.window.你的函数 ] 就可以了
     
    DOM方法:
    父窗口操作IFRAME:window.frames["iframeSon"].document
    IFRAME操作父窗口: window.parent.document

    jquery方法:
    在父窗口中操作 选中IFRAME中的所有输入框: (window.frames["iframeSon"].document).find(:text);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对象。

    例如:

    主页面

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>主页面</title>
     6     <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
     7     <script type="text/javascript">
     8         function showSubValue(){
     9 
    10             alert( window.frames[0].document.getElementById("zhe").value);
    11 //var v = window.frames[0].document.getElementByIdx_x("subdiv1").innerHTML;
    12 //alert(v);
    13 //   http://hi.baidu.com/bigideaer/blog/item/780337e6af39933d2df534ff.html
    14            // var o = $(window.frames[0].document).find(":div#subdiv1");
    15            // alert(o.html());
    16         }
    17     </script>
    18 </head>
    19 <body>
    20 <div id="mainDiv">主页面测试数据</div>
    21 <input type="button" value="查看子页面数据" onclick="showSubValue();"/>
    22 <iframe src="zi.html" width="300" height="300"></iframe>
    23 </body>
    24 </html>

    子页面:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
     6     <title>子页面</title>
     7     <script type="text/javascript">
     8         function showMainValue(){
     9 //dom方式
    10 var v = window.parent.document.getElementById("mainDiv").innerHTML;
    11 alert(v);
    12 
    13 window.parent.document.getElementById("mainDiv").innerHTML = "修改后的主页面数据";
    14 
    15 
    16 //jquery方式
    17 //            var o = $(window.parent.document).find(":div#mainDiv");
    18   //          alert(o.html());
    19         }
    20     </script>
    21 </head>
    22 <body>
    23 <div id="subdiv1" >子页面测试数据</div>
    24 <input type="button" id="zhe" value="显示父页面数据" onclick="showMainValue();"/>
    25 </body>
    26 </html>

     --------------------转自:https://www.cnblogs.com/lyggqm/p/5691480.html

  • 相关阅读:
    Servlet和Filter的url匹配
    iterator的用法
    python学习笔记
    python的序列之列表
    java开发实战学习笔记3
    java学习笔记4
    Java Java集合
    Struts2中的几个符号
    DbHelper.cs
    做word,excel时需要引用com
  • 原文地址:https://www.cnblogs.com/Zcyou/p/10919665.html
Copyright © 2011-2022 走看看