网页前端设计

http://www.86y.org

搜索文章

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

用声音读出全文关注我吧
 2011/9/23 20:18:04 阅读次数:7306

在网站开发时,页面间传值是一个经常碰到的问题,传值的方法也有很多种,今天先说说使用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" onclick="pass()"/>
     </body>
 </html>

B页面代码:

<html>
<head><title></title></head>
    <body>
        <script type="text/javascript">
        
        window.onload=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" onclick="pass()"/>
     </body>
 </html>

B页面代码:

<html>
<head><title></title></head>
    <body>
        <script type="text/javascript">
        
        window.onload=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" onclick="add()"/>
         <input type="button" value="跳转页面" id="Button1" onclick="pass()"/>
     </body>
 </html>

B页面代码:

<html>
<head><title></title></head>
    <body>
        <script type="text/javascript">        
        window.onload=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>

在A页面中定义一个自定对象Person,以及一个空数组,每次一个Person后将新建的Person对象保存入数组,完成后通过 window.showModalDialog方法将数组对象传入B页面,B页面接收页面后,通过访问数组的方法获取A页面传入的对象数组


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭