时间戳

首页 > 技术文章 > javascript HTML静态页面传值的四种方法

javascript HTML静态页面传值的四种方法

EdwinChan 2017-02-10 16:47 原文

 

一：JavaScript静态页面值传递之URL篇
能过URL进行传值.把要传递的信息接在URL上.
Post.htm

 1 代码如下:
 2 
 3 <input type="text" name="username">
 4 <input type="text" name="sex">
 5 <input type="button" value="Post">
 6 <script language="javascript" >
 7 function Post()
 8 {
 9 //单个值 Read.htm?username=baobao;
10 //多全值 Read.htm?username=baobao&sex=male;
11 　　url = "Read.htm?username="+escape(document.all.username.value);
12 　　url += "&sex=" + escape(document.all.sex.value);
13 　　location.href=url;
14 }
15 </script>

 


Read.htm

代码如下:
 1 <script language="javascript" >
 2 /*
 3 *--------------- Read.htm -----------------
 4 * Request[key]
 5 * 功能:实现ASP的取得URL字符串,Request("AAA")
 6 * 参数:key,字符串.
 7 * 实例:alert(Request["AAA"])
 8 *--------------- Request.htm -----------------
 9 */
10 var url=location.search;
11 var Request = new Object();
12 if(url.indexOf("?")!=-1)
13 {
14 　　var str = url.substr(1)　//去掉?号
15 　　strs = str.split("&");
16 　　for(var i=0;i<strs.length;i++)
17 　　{
18  　　　 Request[strs[i ].split("=")[0]]=unescape(strs[ i].split("=")[1]);
19 　　}
20 }
21 alert(Request["username"])
22 alert(Request["sex"])
23 </script><script language="JavaScript">
24 <!--
25 function Request(strName)
26 {
27 　　var strHref = "www.jb51.net/index.htm?a=1&b=1&c=测试测试";
28 　　var intPos = strHref.indexOf("?");
29 　　var strRight = strHref.substr(intPos + 1);
30 　　var arrTmp = strRight.split("&");
31 　　for(var i = 0; i < arrTmp.length; i++)
32 　　{
33 　　　　var arrTemp = arrTmp[i ].split("=");
34 　　　　if(arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1];
35 　　}
36 　　return "";
37 }
38 alert(Request("a"));
39 alert(Request("b"));
40 alert(Request("c"));
41 //-->
42 </script>
43 <script>
44 String.prototype.getQuery = function(name)
45 {
46 　　var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
47 　　var r = this.substr(this.indexOf("?")+1).match(reg);
48 　　if (r!=null) return unescape(r[2]); return null;
49 }
50 　　var str ="www.jb51.net/index.htm?a=1&b=1&c=测试测试";
51 　　alert(str.getQuery("a"));
52 　　alert(str.getQuery("b"));
53 　　alert(str.getQuery("c"));
54 </script>

 

优点:取值方便.可以跨域.
缺点:值长度有限制

二：JavaScript静态页面值传递之Cookie篇
Cookie是浏览器存储少量命名数据.
它与某个特定的网页或网站关联在一起.
Cookie用来给浏览器提供内存,
以便脚本和服务器程序可以在一个页面中使用另一个页面的输入数据.
Post.htm

代码如下:

 1 <input type="text" name="txt1">
 2 <input type="button" value="Post">
 3 <script language="javascript" >
 4 function setCookie(name,value)
 5 {
 6 /*
 7 *--------------- setCookie(name,value) -----------------
 8 * setCookie(name,value)
 9 * 功能:设置得变量name的值
10 * 参数:name,字符串;value,字符串.
11 * 实例:setCookie('username','baobao')
12 *--------------- setCookie(name,value) -----------------
13 */
14 　　var Days = 30; //此 cookie 将被保存 30 天
15 　　var exp　= new Date();
16    location.href = "Read.htm"; //接收页面.
17 }
18 </script>

 

Read.htm

代码如下:

 1 <script language="javascript" >
 2 function getCookie(name)
 3 {
 4 /*
 5 *--------------- getCookie(name) -----------------
 6 * getCookie(name)
 7 * 功能:取得变量name的值
 8 * 参数:name,字符串.
 9 * 实例:alert(getCookie("baobao"));
10 *--------------- getCookie(name) -----------------
11 */
12 　　var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
13 　　if(arr !=null) return unescape(arr[2]); return null;
14 }
15 alert(getCookie("baobao"));
16 </script>

 

优点:可以在同源内的任意网页内访问.生命期可以设置.
缺点:值长度有限制.

三：JavaScript静态页面值传递之Window.open篇
这两窗口之间存在着关系.父窗口parent.htm打开子窗口son.htm
子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.
Post.htm

代码如下:
1 <input type=text name=maintext>
2 <input type=button value="Open">
3 Read.htm
4 <script language="javascript" >
5 //window.open打开的窗口.
6 //利用opener指向父窗口.
7 　　var parentText = window.opener.document.all.maintext.value;
8 　　alert(parentText);
9 </script>

  注意 :window.open打开时,不能够使用'_self'参数,因为这样父页面消失,找不到对象了.

优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制.
缺点:两窗口要存在着关系.就是利用window.open打开的窗口.不能跨域.

 

 

四：html本地存储传值篇
这两窗口之间存在着关系.父窗口parent.htm打开子窗口son.htm
子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.
Post.htm

代码如下: 
 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <script>
 7         function set() {
 8             //由于是一个新的技术，你可以通过下面的代码检测你的浏览器是否支持
 9             if (window.localStorage) {
10                 //存储变量的值
11                 localStorage.name = document.all.username.value;
12                 location.href = 'read.html';
13             } else {
14                 alert("NOT SUPPORT");
15             }
16         }
17     </script>
18 </head>
19 <body>
20     <input type="text" name="username" />
21     <input type="button" name="" value="post" onclick="set()"/>
22 </body>
23 </html>

 Read.html

 

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <script>
 7         var value = localStorage["name"];
 8         alert(value);
 9     </script>
10 </head>
11 <body>
12 
13 </body>
14 </html>

 

 

优点:最好的解决方法.

缺点:可能浏览器不支持.

 

 

 

推荐阅读