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 相关文章推荐
node.js中的url.resolve方法使用说明
Dec 10 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
js异步编程小技巧详解
Aug 14 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
JavaScript类的继承多种实现方法
May 30 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
Syphon 使用方法
2021/03/03 冲泡冲煮
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python中的Matplotlib模块入门教程
2015/04/15 Python
python获取各操作系统硬件信息的方法
2015/06/03 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
《小草和大树》教学反思
2014/02/16 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
入党申请书格式
2019/06/20 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL