javaScript页面间传值_使用网页对话框

最新推荐文章于 2021-12-14 08:50:24 发布

luxin10

最新推荐文章于 2021-12-14 08:50:24 发布

阅读量2.4k

点赞数 2

分类专栏： ASP.NET 文章标签： javascript function input button null

本文链接：https://blog.csdn.net/luxin10/article/details/6804069

版权

ASP.NET 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在网站开发时，页面间传值是一个经常碰到的问题，传值的方法也有很多种，今天先说说使用javaScript在页面间传值；

1、向打开的网页对话框传入简单类型

A页面代码：

<html>
<head><title></title></head>

    <body>
        <script type="text/javascript">
        
        function pass(){
            var temp = document.getElementById("t").value;
            window.showModalDialog("b.html",temp ,'dialogHeight:480px;dialogWidth:220px;status:0;help:0;edge:sunken;scroll:1;');
        }
        
         </script>
         <input type="text" id="t" /> 
         <input type="button" value="添  加" id="add_btn" οnclick="pass()"/>
     </body>
 </html>

B页面代码：

<html>
<head><title></title></head>

    <body>
        <script type="text/javascript">
        
        window.οnlοad=function() {
            var receive =window.dialogArguments;
            if(receive!=""){
               alert(receive);
            }
        }
        
         </script>
     </body>
 </html>

在A页面中定义需要被传递的变量 temp ，每次打开B页面时，将A页面上文本框的值赋予temp，通过window.showModalDialog传入B页面

2、向打开的网页对话框传入自定义对象

A页面代码：

<html>
<head><title></title></head>

    <body>
        <script type="text/javascript">
        
        function Person(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        
        function pass(){
            if (InputIsNumber(document.getElementById("age").value)){
                 var person = new Person(document.getElementById("name").value,document.getElementById("age").value,document.getElementById("sex").value);
                 window.showModalDialog("b.html",person ,'dialogHeight:480px;dialogWidth:440px;status:0;help:0;edge:sunken;scroll:1;');
            }else{
                alert("年龄必须为数字");
            }
        }
        
        function InputIsNumber(input){
			var temp = "1234567890";
			var i;
			var j;
			for( i = 0; i < input.length; i ++ ){
				j = input.charAt( i );
			    if (temp.indexOf( j ) == -1){
					return false;
				}
			}
			return true;
		}
        
         </script>
         姓名：<input type="text" id="name" /> 
         年龄：<input type="text" id="age" /> 
         性别：<input type="text" id="sex" /> 
         <input type="button" value="添  加" id="add_btn" οnclick="pass()"/>
     </body>
 </html>

B页面代码：

<html>
<head><title></title></head>

    <body>
        <script type="text/javascript">
        
        window.οnlοad=function() {
            var receive =window.dialogArguments;
            if(receive!=""){
               document.write("姓名："+receive.name+"，年龄："+receive.age+"，性别："+receive.sex);
            }
        }
        
         </script>
     </body>
 </html>
先在A页面中定义一个自定义对象Person，在A页面分别输入Person的姓名、年龄和性别，点击确认后将Person对象通过window.showModalDialog方法传入B页面，B页面在载入时接收该对象，同时直接通过对象的属性进行值访问；

3、向打开的网页对话框输入自定义对象数组

A页面代码：

<html>
<head><title></title></head>

    <body>
        <script type="text/javascript">
        
        var PersonList = new Array(100);
        var index = 0;
        
        function Person(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        
        function pass(){
            window.showModalDialog("222.html",PersonList ,'dialogHeight:480px;dialogWidth:440px;status:0;help:0;edge:sunken;scroll:1;');
        }
        
        function add(){
            if (InputIsNumber(document.getElementById("age").value)){
                 var person = new Person(document.getElementById("name").value,document.getElementById("age").value,document.getElementById("sex").value);
                 PersonList[index] = person;
                 index++;
                 alert("已添加"+index+"个对象");
            }else{
                alert("年龄必须为数字");
            }
        }
        
        function InputIsNumber(input){
			var temp = "1234567890";
			var i;
			var j;
			for( i = 0; i < input.length; i ++ ){
				j = input.charAt( i );
			    if (temp.indexOf( j ) == -1){
					return false;
				}
			}
			return true;
		}
        
         </script>
         姓名：<input type="text" id="name" /> 
         年龄：<input type="text" id="age" /> 
         性别：<input type="text" id="sex" /> 
         <input type="button" value="添  加" id="add_btn" οnclick="add()"/>
         <input type="button" value="跳转页面" id="Button1" οnclick="pass()"/>
     </body>
 </html>

B页面代码：

<html>
<head><title></title></head>

    <body>
        <script type="text/javascript">
        
        window.οnlοad=function() {
            var receive =window.dialogArguments;
            for(var i =0 ; i<receive.length; i++){
                var temp = receive[i];
                if(temp!=null){
                    document.write("姓名："+temp.name+"，年龄："+temp.age+"，性别："+temp.sex + "</br>");
                }
            }
        }
        
         </script>
     </body>
 </html>