JS 实现获取打开一个界面中输入的值


Posted in Javascript onMarch 19, 2013

需求
在一个界面中打开另一个界面,通过JS获取在另一个界面中用户输入的值。
示例:
Index.html

   <html>
   <head>
     <meta http-equiv="content-type" content="text/html; charset=gbk">
         <title>主页</title>
        <script type="text/javascript">
            function EntryPoint() {
                var style = 'dialogHeight:600px;dialogWidth:800px;status:no;help:0;scrool:yes';
                var a = window.showModalDialog('other.html', '', style);
      
               if (a == undefined) {
                   a = window.returnValue;
               }
              // debugger;
               if (a != null && a.length > 0) {
                   document.getElementById("name").value = a[0];
                   document.getElementById("age").value = a[1];
               }
           }
    </script>
    </head> 
    <body>
    <input type="button" value="调用" onclick="EntryPoint()"/><br/>
    <input type="text" name="name" id="name" /><br/>
    <input type="text" name="age" id="age" />
    </body>
    </html> 

另一个界面:

other.html

  <html>
     <head>
         <title>操作界面</title>
          
         <meta http-equiv="content-type" content="text/html; charset=gbk">
          
        <script type="text/javascript">
            function postValue() {
                var name = document.getElementById("name").value;
               var age = document.getElementById("age").value;
               var a = new Array();
               a[0] = name;
               a[1] = age;
               //debugger;
               if (window.opener != undefined) {
                   //for chrome
                   window.opener.returnValue = a;
               }
               else {
                   window.returnValue = a;
               }
               window.close();
           }
    </script>
    </head> 
    <body>
    <input type="button" value="确定" onclick="postValue();"/><br/>
    名字:<input type="text" name="name" id="name" /><br/>
    年龄:<input type="text" name="age" id="age" />
    </body>
    </html>

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

Javascript 相关文章推荐
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
AngularJS报错$apply already in progress的解决方法分析
Jan 30 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
express启用https使用小记
May 21 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 #Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 #Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 #Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 #Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 #Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 #Javascript
js前台分页显示后端JAVA数据响应
Mar 18 #Javascript
You might like
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
javascript 框架小结 个人工作经验
2009/06/13 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
Javascript的闭包详解
2014/12/26 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
Python中取整的几种方法小结
2017/01/06 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python实现决策树分类
2018/08/30 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
opencv实现图像几何变换
2021/03/24 Python
魅力教师事迹材料
2014/01/10 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
水利水电专业自荐信
2014/07/08 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
小学毕业感言200字
2015/07/30 职场文书