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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
js获取图片的base64编码并压缩
Dec 05 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
javascript字符串函数汇总
2015/12/06 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
python遍历数组的方法小结
2015/04/30 Python
Python中isnumeric()方法的使用简介
2015/05/19 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
Python连接mysql方法及常用参数
2020/09/01 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
物流仓管员岗位职责
2013/12/04 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
2016春节家属慰问信
2015/03/25 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript