web静态页面之间传值
2016-11-02 本文已影响111人
管家頗
方法一：将要传的值拼接到URL中，页面跳转后，从URL获取参数值
原页面demo1：
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function toDemo2() {
var txt1=document.getElementById("txt1").value; var txt2=document.getElementById("txt2").value;
var myUrl="demo2.html"+"?"+"txt1="+txt1+"&txt2="+txt2;
window.location.assign(myUrl);
}
</script>
</head>
<body>
<body>
<label id="label" >page test3</label>
<br><br>
<input type="text" id="txt1">
<input type="text" id="txt2">
<input type="button" id="btn" value="to demo2" onclick="toDemo2()">
</body>
</html>
跳转后的页面Demo2：
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>demo2</title>
<script type="text/javascript">
function getTextValue() {
//获取URL字符串
var myUrl = location.href;
alert(myUrl);
//获取URL中？后的参数字符串
var parameterStr = myUrl.split("?")[1];
//分割字符串，生成存放参数名和参数值的数组
var parArray = parameterStr.split("&");
//遍历数组，获取每个参数的参数名和参数值
for (var i = 0; i<parArray.length; i++){
var parameter = parArray[i];
//分割字符串，获取参数名、参数值
var parName = parameter.split("=")[0];
//参数名(一般声明为英文)为中文时进行解码
parName = decodeURI(parName);
var parValue = parameter.split("=")[1];
//参数值为中文时进行解码
parValue = decodeURI(parValue);
alert(parName+"="+parValue);
}
}
</script>
</head>
<body>
<label id="label1" >page demo2</label>
<br><br>
<input type="button" id="bt1" value="get textValue" onclick="getTextValue()">
</body>
</html>
方法二：使用window.opener获取父窗口对象，再操作父窗口的标签
原页面test1：
<!doctype html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test1</title>
<script type="text/javascript">
function totest2() {
window.open("test2.html");
}
</script>
</head>
<body>
<label id="label1" >page test1</label>
<br><br>
<input type="text" id="txt">
<input type="button" value="to test2" onclick="totest2()">
</body>
</html>
跳转后页面test2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test2</title>
<script type="text/javascript">
function getvalue() {
//获取父窗口
var test1 = window.opener;
if (test1){
var txt = test1.document.getElementById("txt");
alert(txt.value);
}
}
</script>
</head>
<body>
<label id="label1" >page test2</label>
<br><br>
<input type="button" onclick="getvalue()" value="get test1 page value">
</body>
</html>
