• 用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>
  • 相关阅读:
    hive sql 解析json
    解决华为手机无法安装未签名apk问题(该安装包未包含任何证书)
    对马尔科夫决策过程的代码补充解释
    对马尔科夫决策过程MDP(Markov Decision Processes)的一点理解
    使用Web在PC和安卓之间传输文件(Transfer files via wifi)
    记录下自己的生活状态,昏昏沉沉的半年,迷茫的未来
    __repr__和pass在python中的含义
    LaTeX基础调节,调节行距,字体大小,字体,页边距
    LaTeX怎么让一行中的一部分右对齐
    Tkinter主动刷新(强制刷新)
  • 原文地址:https://www.cnblogs.com/htys/p/3547669.html
Copyright © 2020-2023  润新知