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

最新推荐文章于 2021-06-26 02:40:21 发布

安先生还是没名字

最新推荐文章于 2021-06-26 02:40:21 发布

阅读量1.2k

点赞数

分类专栏：技术文章标签： html cookie 静态页面-url

本文链接：https://blog.csdn.net/qiaokelinaicha/article/details/58259212

版权

技术专栏收录该内容

58 篇文章 2 订阅

订阅专栏

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

安先生还是没名字

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html5学习--静态页面传递参数的几种方法

此前一篇文章总结了html5下利用localstorage方法在静态页面间传递参数的方式，详见html5学习–利用localstorage在静态页面间传递参数。除此之外，html中静态页面传递参数的方法还有下面几种。整理如下：一、Cookie方法注意：Cookie方法需要以localhost的形式实现，即加入本地服务器中或利用Dreamwearer、HBuilder等自带服务器功能的软件运行测试。
复制链接

扫一扫