JS 实现获取打开一个界面中输入的值

 更新时间:2013年03月19日 09:12:42   作者:  
JS 实现获取打开一个界面中输入的值,需要的朋友可以参考一下

需求
在一个界面中打开另一个界面,通过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的冲突。

相关文章

  • 详解Require.js与Sea.js的区别

    详解Require.js与Sea.js的区别

    RequireJS 和 Sea.js 都是模块加载器,倡导模块化开发理念,核心价值是让 JavaScript 的模块化开发变得简单自然。这篇文章给大家简单介绍了Require.js与Sea.js的区别,感兴趣的朋友一起看看吧
    2018-08-08
  • JavaScript定时器原理详解

    JavaScript定时器原理详解

    这篇文章主要介绍了JavaScript定时器原理,setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数,文章围绕JavaScript定时器相关资料展开以下内容,需要的朋友可以参考一下
    2021-12-12
  • javascript实现youku的视频代码自适应宽度

    javascript实现youku的视频代码自适应宽度

    这篇文章主要介绍了javascript实现youku的视频代码自适应宽度的方法的示例,十分的简单实用,有需要的小伙伴可以参考下。
    2015-05-05
  • js wmp操作代码小结(音乐连播功能)

    js wmp操作代码小结(音乐连播功能)

    js对于wmp的一些属性与方法,方便大家控制音乐的播放的一些细节
    2008-11-11
  • JS+CSS实现美化的下拉列表框效果

    JS+CSS实现美化的下拉列表框效果

    这篇文章主要介绍了JS+CSS实现美化的下拉列表框效果,涉及javascript针对下拉列表框样式的相关操作技巧,非常美观大方,需要的朋友可以参考下
    2015-08-08
  • 如何用原生js写一个弹窗消息提醒插件

    如何用原生js写一个弹窗消息提醒插件

    这篇文章主要介绍了用原生js写一个弹窗消息提醒插件,下面小编来和大家一起学习一下
    2019-05-05
  • JavaScript中判断数据类型的方法总结

    JavaScript中判断数据类型的方法总结

    这篇文章主要为大家详细介绍了一些JavaScript中判断数据类型的方法,文中的示例代码讲解详细,具有一定的学习价值,需要的小伙伴可以了解一下
    2023-07-07
  • eslint+prettier统一代码风格的实现方法

    eslint+prettier统一代码风格的实现方法

    这篇文章主要介绍了eslint+prettier 统一代码风格的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • AngularJS实现textarea记录只能输入规定数量的字符并显示

    AngularJS实现textarea记录只能输入规定数量的字符并显示

    AngularJS 是一个 MV* 框架,最适于开发客户端的单页面应用。它不是个功能库,而是用来开发动态网页的框架。接下来通过本文给大家介绍AngularJS实现textarea记录只能输入规定数量的字符并显示的相关内容,需要的朋友参考下吧
    2016-04-04
  • JS中获取 DOM 元素的绝对位置实例详解

    JS中获取 DOM 元素的绝对位置实例详解

    这篇文章主要介绍了JS中获取 DOM 元素的绝对位置,详细介绍了各种获取dom元素绝对位置的方法及对应的兼容性,需要的朋友参考下吧
    2018-04-04

最新评论