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 13 Javascript
JQuery 学习技巧总结
May 21 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
JavaScript数组操作详解
Feb 04 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 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引用传值实例详解学习
2013/11/06 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
Python中super()函数简介及用法分享
2016/07/11 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
python实现简单登陆系统
2018/10/18 Python
PyQt5通信机制 信号与槽详解
2019/08/07 Python
Python3 翻转二叉树的实现
2019/09/30 Python
Python字典底层实现原理详解
2019/12/18 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
小学运动会表扬稿
2014/01/19 职场文书
迟到检讨书300字
2014/02/14 职场文书
党校学习自我鉴定
2014/02/24 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
初三英语教学反思
2016/02/15 职场文书
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS