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 firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
小试小程序云开发(小结)
Jun 06 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防止form重复提交的方法
2013/07/01 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
python中实现php的var_dump函数功能
2015/01/21 Python
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
python数据结构之图的实现方法
2015/07/08 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
Python列表的切片实例讲解
2019/08/20 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
购买原创艺术品:Zatista
2019/11/09 全球购物
如何写一个自定义标签
2012/12/28 面试题
写好自荐信的要点
2013/11/06 职场文书
档案工作个人总结
2015/03/03 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
Go 语言结构实例分析
2021/07/04 Golang