您的位置：首页 > Web前端 > HTML5

html5学习--静态页面传递参数的几种方法

2017-02-27 21:18 537 查看

此前一篇文章总结了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仍存在较多弊端。本文并未对该论点进行深入研究，各位网友可自己搜索相关文章求证。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html cookie 静态页面-url

相关文章推荐

新的分享

章节导航