此前一篇文章总结了html5下利用localstorage方法在静态页面间传递参数的方式,详见html5学习–利用localstorage在静态页面间传递参数。
除此之外,html中静态页面传递参数的方法还有下面几种。整理如下:
一、Cookie方法
- 注意:Cookie方法需要以localhost的形式实现,即加入本地服务器中或利用Dreamwearer、HBuilder等自带服务器功能的软件运行测试。仅在文件夹内双击本地html文件打开测试的方法无效。
【转自】两个html页面之间怎么传递参数值
该范例设计了常见的用户名密码登录界面a.htm和登录应答界面b.htm。基于Cookie方法,a.htm中需传递输入用户名、密码、是否在七天内保持登录状态3个信息至b.htm页面进行审核,并显示应答信息。默认的登录用户名、密码分别为abc、abc。源代码未添加对中文字符的支持,需在head元素内添加语句声明“meta charset=”UTF-8” ”,具体如下:
<!--a.htm-->
<html>
<head>
<meta charset="UTF-8" />
<title>a</title>
<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);
// 定义Cookie名称和相应值
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>
<!--b.htm-->
<html>
<head>
<meta charset="UTF-8" />
<title>b</title>
</head>
<body >
<div id="msg" ></div>
<script >
///***
//*读取指定的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 DoFirst(){
var username = ReadCookie("username"); //读取名称为“username”的Cookie值
if(username && username.length>0) {
$("msg").innerHTML = "<h1>欢迎光临," + username + "!</h1>";
} else {
$("msg").innerHTML = "<a href='a.htm'>请登录</a>";
}
}
window.onload = DoFirst();
</script>
</body>
</html>
其中,b.htm需在页面元素生成完成后基于cookie值对div元素的值进行修改,以形成登录响应。参考此前对script在html中所在位置的讨论一文(详见html5学习–js语句在html文档中的位置),此处对源代码中b.htm的script代码块位置进行了调整。同时,利用“window.onload = DoFirst();”语句确保在页面加载完成后再修改元素属性值。
Cookie方法的优缺点:
优点:可以在同源内的任意网页内访问.生命期可以设置.
缺点:值长度有限制.
二、URL方法
- 注意:URL方法仅在文件夹内双击本地html文件打开测试的方法有效。
这里示例单一参数和复杂参数传递两种情况:
1、单一参数
【转自】html 页面之间跳转和传值
该范例用URL方法将a.html中输入框内容传递至b.htm,即利用URL尾部的“?”字符串传递单一数值,在b.html的script代码块中进行字符串分割操作从而提取被传递参数。代码如下:
<!--a.html-->
<html>
<head>
<title>New Document</title>
<script>
function to (){
var getval =document.getElementById("cc").value;
document.location.href = "b.html?cc="+getval;
}
</script>
</head>
<body>
<input type="text" id ="cc" >
<input type="button" value="a" onclick="to()" >
</body>
</html>
<!--b.html-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>New Document</title>
<script>
var thisURL = document.URL;
var getval =thisURL.split('?')[1];
var showval= getval.split("=")[1];
function showvalf(){
alert(showval);
document.getElementById('ee').value=showval;
}
</script>
</head>
<body onload="showvalf()">
<input type="text" id ="ee" />
</body>
</html>
其中,a.html的“document.location.href = “b.html?cc=”+getval; ”语句在原文中使用的是“document.location.href (”b.html?cc=”+getval; )”经测试无法通过,仅“=”形式测试通过。
2、复合参数
复合参数方法与单一参数方法基本一致,在接收页面script增加字符串分割处理,用以将url中的复合参数逐个提出。底层代码【转自】javascript静态页面传值的三种方法分享。修改后的代码如下:
<!--post.html-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<input type="text" name="username" value="name"/>
<input type="text" name="sex" value="sexx">
<input type="button" value="Post" onClick="Post();">
<script language="javascript" >
function Post()
{
//单个值 read.html?username=name;
//多全值 read.html?username=name&sex=sexx;
url = "read.html?username="+escape(document.all.username.value);
url += "&sex=" + escape(document.all.sex.value);
document.location.href=url;
}
</script>
</body>
</html>
<!--read.html-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body id="main">
<script language="javascript" >
var url=document.URL;
var Request = new Object();
if(url.indexOf("?")!=-1)
{
var parent = document.getElementById("main").parentNode; //标记父元素
var intPos = url.indexOf("?"); //获取?位置
var str = url.substr(intPos + 1); //截取?后的字符串
strs = str.split("&"); //字符串按&分割
alert(strs);
for(var i=0;i<strs.length;i++)
{
var arrTemp = strs[i].split("="); //子字符串按=再次分割
//以下为在网页内动态创建元素
var label11 = document.createElement('label'); //1、创建元素
label11.innerHTML = arrTemp[0]+"="; //2、向元素属性赋值
parent.appendChild(label11); //3、向父元素追加所生成元素
var label12 = document.createElement('label');
label12.innerHTML = arrTemp[1]+";";
parent.appendChild(label12);
//
}
}
</script>
</body>
</html>
其中,read.html的script中包含了动态添加网页元素的代码示例。后续文章会对该内容进行介绍。
另外,“实现html页面的参数传递”一文中讨论了URL方法的几种扩展应用,包括对location.search的讨论、获取准确参数并提取或设置等。具体内容请参阅原文。
URL方法的优缺点:
优点:取值方便.可以跨域.
缺点:值长度有限制
三、其他方法
参考网友文章“[前端在html页面之间传递参数的方法]”(http://blog.csdn.net/liuyan19891230/article/details/50961335),除上述两种大类外,还包括form表单传递、window.open等方式。具体可参考原文。
window.open方法的优缺点:
优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制.
缺点:两窗口要存在着关系.就是利用window.open打开的窗口.不能跨域.
最后,1、有网友讨论了用非Cookies方法在静态页面中不跳转页面、同时保存数据的问题。具体见“HTML静态页 保存数据问题(不要保存到COOKIES)”。网友提出,可以使用ajax方法添加异步动态对象。当在HTML页面上提交相当信息后,该页不跳转,而把内容提交到相关处理页面。此时可在处理页面里把数据存起来,具体存储形式包括数据库、文本、EXCEL等。处理结果再返回到原HTML页面,并给出提示。而此时该面页并没有跳转。这是与普通页面提交信息要跳转时,表现形式上的最大区别。2、“ HTML5代替Cookie? HTML5本地存储安全性http://blog.csdn.net/xcyuzhen/article/details/7910674”一文对html5-localstorage的安全性与Cookie进行了比较讨论,在2012年的时间戳下认为localstorage仍存在较多弊端。本文并未对该论点进行深入研究,各位网友可自己搜索相关文章求证。