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 document.compatMode兼容性
Feb 23 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 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
与数据库连接
2006/10/09 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
js change,propertychange,input事件小议
2011/12/20 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
angularJS提交表单(form)
2015/02/09 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
python pymysql库的常用操作
2020/10/16 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
英国天然宝石首饰购买网站:Gemondo Jewellery
2018/10/23 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
韩语专业本科生求职信
2013/10/01 职场文书
出纳的岗位职责
2013/11/09 职场文书
个人违纪检讨书
2014/09/15 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
建国大业观后感600字
2015/06/01 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
javascript Number 与 Math对象的介绍
2021/11/17 Javascript