javascript HTML靜態頁面傳值的四種方法

一：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>

優點:最好的解決方法.

缺點:可能瀏覽器不支持.

javascript HTML靜態頁面傳值的四種方法

免責聲明！