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 相关文章推荐
另一个javascript小测验(代码集合)
Jul 27 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
vue项目接口域名动态获取操作
Aug 13 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实现WEB动态网页静态
2006/10/09 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
JS代码放在head和body中的区别分析
2011/12/01 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
webpack多页面开发实践
2017/12/18 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
工程质量月活动方案
2014/02/19 职场文书
文化建设工作方案
2014/05/12 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
初中差生评语
2014/12/29 职场文书
银行自荐信怎么写
2015/03/05 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书