在网站开发时，页面间传值是一个经常碰到的问题，传值的方法也有很多种，今天先说说使用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)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)