HTML5 页面参数传递
一、 使用Cookie传递参数 ，a页面保存Cookie，b页面读取，代码如下：
页面一：
<html>
<head>
<title>atitle>
<style type="text/css">
* {margin:0}
body {text-align:center;min-width:760px}
div {padding:3px 3px 3px 3px}
#main {width:720px;margin:0 auto;text-align:left;margin-top:30px}
#main div span {width:50px}
style>
<script type="text/javascript">
/***
* @param {string} cookieName Cookie名称
* @param {string} cookieValue Cookie值
* @param {number} nDays Cookie过期天数
*/
function SetCookie(cookieName,cookieValue,nDays) {
/*当前日期*/
var today = new Date();
/*Cookie过期时间*/
var expire = new Date();
/*如果未设置nDays参数或者nDays为0，取默认值1*/
if(nDays == null || nDays == 0) nDays = 1;
/*计算Cookie过期时间*/
expire.setTime(today.getTime() + 3600000 * 24 * nDays);
/*设置Cookie值*/
document.cookie = cookieName + "=" + escape(cookieValue)
+ ";expires=" + expire.toGMTString();
}
function login() {
var username = $("user").value;
var password = $("pass").value;
/*是否选中7天内无需登录*/
var save = $("save").checked;
if(username=="abc" && password=="abc") {
if(save) SetCookie("username",username,7);
else SetCookie("username",username,1);
/*跳转到ex8.html页面*/
document.location = "b.htm";
} else {
alert("用户名或密码错误！");
}
}
function $(id) {
return document.getElementById(id);
}
script>
head>
<body>
<div id="main">
<div><span>用户名：span><input type="text" id="user" />div>
<div><span>密码：span><input type="password" id="pass" />div>
<div>
<input type="checkbox" id="save" />
7天内无需登录
<input type="button" onclick="login()" value="登录" />
div>
div>
body>
html>
页面二：
<html>
<head>
<title>btitle>
<script type="text/javascript">
/***
*读取指定的Cookie值
*@param {string} cookieName Cookie名称
*/
function ReadCookie(cookieName) {
var theCookie = "" + document.cookie;
var ind = theCookie.indexOf(cookieName);
if(ind==-1 || cookieName=="") return "";
var ind1 = theCookie.indexOf(';',ind);
if(ind1==-1) ind1 = theCookie.length;
/*读取Cookie值*/
return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
}
function $(id) {
return document.getElementById(id);
}
function init() {
var username = ReadCookie("username");
if(username && username.length>0) {
$("msg").innerHTML = "欢迎光临,"
+ username + "!";
} else {
$("msg").innerHTML = "请登录";
}
}
script>
head>
<body onload="init()">
<div id="msg">div>
body>
html>
二、location.href=”index33.html?name=value”;方式传递
(1)、
页面一
<span style="font-size:14px;">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script LANGUAGE="JavaScript">
function show(){
var result = document.getElementById("name").value;
location.href="index33.html?name="+result;
}
script>
<style>
.input7 {color: #999;width:145px;height:20px;border: 1px solid #CCCCCC; font-size:12px;background-color: #fff;}
style>
<input type="text" id="name" class="input7">
<input type="button" value="OK" onclick="show()"/>
body>
html>span>
页面二:
<span style="font-size:14px;">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<script>
function getvalue(name) {
var str = window.location.search; //location.search是从当前URL的?号开始的字符串
console.log()
if (str.indexOf(name) != -1) {
var pos_start = str.indexOf(name) + name.length + 1;
var pos_end = str.indexOf("&", pos_start);
if (pos_end == -1) {
alert(str.substring(pos_start));
} else {
alert("没有此值~~");
}
}
}
script>
<input type="button" onclick="getvalue('name')" value="GetValue">
body>
html>span><span style="font-size: 14px;">
span>
(2)、
页面一：
font-size:14px;">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<script>
function to(){
var getval = document.getElementById("cc").value;
var aa = document.getElementById("aa").value;
location.href = "index22.html?cc="+getval + "&" +"aa="+aa;
}
script>
head>
<body>
<input type="text" id="aa">
<input type="text" id ="cc" >
<input type="button" value="a" onclick="to()” >