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 相关文章推荐
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
原生JS实现幻灯片
Feb 22 Javascript
vue增删改查的简单操作
Jul 15 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
react build 后打包发布总结
Aug 24 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 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
ezSQL PHP数据库操作类库
2010/05/16 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
Javascript MD4
2006/12/20 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
python pdb调试方法分享
2014/01/21 Python
python的exec、eval使用分析
2017/12/11 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
python中turtle库的简单使用教程
2020/11/11 Python
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
秋季婚礼证婚词
2014/01/11 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
入党群众意见范文
2015/06/02 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
2019 入党申请书范文
2019/07/10 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
如何在Python中妥善使用进度条详解
2022/04/05 Python