zoukankan      html  css  js  c++  java
  • 用javascript如何在框架间传值

    比如一个左右型的框架,右边框架有一个文本框,当我点击左边框架内的一个按钮后可以将右边框架内文本框中的文字取过来显示到左边框架里面

    frame传参不用ajax的
    //index.html
    <style>
    a {
    display:block;
    margin-bottom:20px;
    30px;
    }
    iframe {
    400px;
    height:300px;
    border:1px solid #000;
    }
    </style>
    <script>
    window.onload=function(){
    document.getElementById('x').onclick=function(){
    frames['_left'].document.getElementById('a').innerHTML=frames['_right'].document.getElementById('b').value.replace(/
    /g,'<br />');
    }
    } </script>
    <a href="#" id="x">点</a>
    <iframe name="_left" src="1.html"></iframe>
    <iframe name="_right" src="2.html"></iframe>
    //1.html
    <div id="a" style="background:#000;color:#fff;300px;height:400px;"></div>
    //2.html
    <textarea id="b" style="300px;height:300px;">
    测试
    </textarea>

    222222222222222222222

    这个依然是为我的项目而服务的,因为项目的功能需要此技术来实现,或许对很多人来说这个不难,可是对我这个不太对JavaScript感冒的人来说就不是那么容易了,办法只有一个:找资料现学呗。

    先来了解一下相关知识:要实现框架中多窗体的不同元素的访问,则必须使用window对象中的Frames属性。Frames属性同样也是一个数组,它在父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问:
    parent.frames[Index1].docuement.forms[index2]
    通过parent.frames.length确定窗口中窗体的数目。除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访:
    parent.framesName.document.getElementById()
    OK,这么点资料就够用了,我们来小试一把。首先创建一个theFather.html,其代码如下:

     
    1. <html>
    2. <head>
    3. <title>frame get Value test</title>
    4. </head>
    5. <iframe frameborder="1" height="78" marginheight="0" marginwidth="0" scrolling="no" width="100%" src="theSon.html"></iframe>
    6. <h3>这是theFather的文本框</h3>
    7. <input type="text" name="txtFather" id="txtFather" />
    8. </html>
     

     

    接下来创建theSon.html,其代码如下:

     
    1. <html>
    2. <head>
    3. <title>the son frame</title>
    4. <script type="text/javascript">
    5. //此方法用于向其父文本框类赋值
    6. function setValue(){
    7.   
    8.   //获得子类文本框中的值
    9.   var sonValue=document.getElementById("txtSon").value;
    10.   //弹出信息,此处仅用于测试
    11.   alert("theSon的值为:"+sonValue);
    12.   //向父类文本框赋值
    13.   parent.document.getElementById("txtFather").value=sonValue;
    14. }
    15. </script>
    16. </head>
    17. <body>
    18. <h3>这是theSon的文本框及按钮</h3>
    19. <input type="text" name="txtSon" id="txtSon" />
    20. <input type="button" name="btnSon" id="btnSon" value="提交" onclick="setValue();" />
    21. </body<
      span class="tag">>
    22. </html>
  • 相关阅读:
    PrintStream标准字节输出流
    DataInputStream数据字节专属输入流
    java.io.DateOutputStream:数据专属字节输出流
    BufferedWriter带有缓冲区的输出流 及 OutputStreamWriter转换流
    BufferedReader带有缓冲区的输入流 及 InputStreamReader转换流
    FileWriter输出文本流
    FileReader输入文本流
    使用FileInputStream 和 FileOutputStream 进行copy流 和 使用FileReader 和 FileWriter 进行 copy流案例:
    FileOutputStream输出字符流
    window docker的安装
  • 原文地址:https://www.cnblogs.com/htys/p/3547669.html
Copyright © 2011-2022 走看看