zoukankan      html  css  js  c++  java
  • JS 实现获取打开一个界面中输入的值

    需求

    在一个界面中打开另一个界面,通过JS获取在另一个界面中用户输入的值。

    示例:

    Index.html

       1:  <html>
       2:  <head>
       3:  <meta http-equiv="content-type" content="text/html; charset=gbk">
       4:      <title>主页</title>
       5:     <script type="text/javascript">
       6:         function EntryPoint() {
       7:             var style = 'dialogHeight:600px;dialogWidth:800px;status:no;help:0;scrool:yes';
       8:             var a = window.showModalDialog('other.html', '', style);
       9:   
      10:             if (a == undefined) {
      11:                 a = window.returnValue;
      12:             }
      13:            // debugger;
      14:             if (a != null && a.length > 0) {
      15:                 document.getElementById("name").value = a[0];
      16:                 document.getElementById("age").value = a[1];
      17:             }
      18:         }
      19:  </script>
      20:  </head> 
      21:  <body>
      22:  <input type="button" value="调用" onclick="EntryPoint()"/><br/>
      23:  <input type="text" name="name" id="name" /><br/>
      24:  <input type="text" name="age" id="age" />
      25:  </body>
      26:  </html>  

    另一个界面:

    other.html

       1:  <html>
       2:  <head>
       3:      <title>操作界面</title>
       4:       
       5:      <meta http-equiv="content-type" content="text/html; charset=gbk">
       6:       
       7:     <script type="text/javascript">
       8:         function postValue() {
       9:             var name = document.getElementById("name").value;
      10:             var age = document.getElementById("age").value;
      11:             var a = new Array();
      12:             a[0] = name;
      13:             a[1] = age;
      14:             //debugger;
      15:             if (window.opener != undefined) {
      16:                 //for chrome
      17:                 window.opener.returnValue = a;
      18:             }
      19:             else {
      20:                 window.returnValue = a;
      21:             }
      22:             window.close();
      23:         }
      24:  </script>
      25:  </head> 
      26:  <body>
      27:  <input type="button" value="确定" onclick="postValue();"/><br/>
      28:  名字:<input type="text" name="name" id="name" /><br/>
      29:  年龄:<input type="text" name="age" id="age" />
      30:  </body>
      31:  </html>

    在该DEMO中遇到一个问题,那就是chrome中window.close()方法不起作用。最后通过,window.opener来解决chrome和IE的冲突。

    具体参考:

    http://www.cnblogs.com/chopper/archive/2012/06/25/2556266.html

  • 相关阅读:
    有个扫描二维码的扩展,还不错
    js实现html截图生成图片
    微信小程序左右滑动切换图片酷炫效果(附效果)
    谷歌扩展程序设置ajax请求允许跨域(极少人知道的解决方案)
    h5页面使用sessionStorage滚动到上次浏览器位置《原创》
    ajax返回json数组遍历添加到html
    解决微信内置浏览器屏蔽下载链接问题
    解决html5新标签【placeholder】低版本浏览器下不兼容问题
    Web前端知识技能大汇总
    酷炫的页面滚动切换动画效果
  • 原文地址:https://www.cnblogs.com/jiguixin/p/2967159.html
Copyright © 2011-2022 走看看