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 函数中的参数使用分析
Mar 27 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
解决vue跨域axios异步通信问题
Apr 17 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 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
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
php下使用iconv需要注意的问题
2010/11/20 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python创建系统目录的方法
2015/03/11 Python
Python用模块pytz来转换时区
2016/08/19 Python
详解python3实现的web端json通信协议
2016/12/29 Python
详解python字节码
2018/02/07 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
eBay奥地利站:eBay.at
2019/07/24 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
赡养老人协议书
2014/04/21 职场文书
2014年党总支工作总结
2014/12/18 职场文书
职工年度考核评语
2014/12/31 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
门球健将观后感
2015/06/16 职场文书
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers