javascript靜態頁面傳值的三種方法

 

一:JavaScript靜態頁面值傳遞之URL篇

能過URL進行傳值.把要傳遞的信息接在URL上.

Post.htm

 

 

<input type="text" name="username">

<input type="text" name="sex">

<input type="button" value="Post">

<script language="javascript" >

function Post()

{

//單個值Read.htm?username=baobao;

//多全值Read.htm?username=baobao&sex=male;

  url = "Read.htm?username="+escape(document.all.username.value);

url += "&sex=" + escape(document.all.sex.value);

location.href=url;

}

</script

Read.htm

 

 

<script language="javascript" >

/*

*————— Read.htm —————–

* Request[key]

* 功能:實現ASP的取得URL字符串,Request("AAA")

* 參數:key,字符串.

* 實例:alert(Request["AAA"])

*————— Request.htm —————–

*/

var url=location.search;

var Request = new Object();

if(url.indexOf("?")!=-1)

{

var str = url.substr(1) //去掉?號

  strs = str.split("&");

for(var i=0;i<strs.length;i++)

{

  Request[strs[i ].split("=")[0]]=unescape(strs[ i].split("=")[1]);

}

}

alert(Request["username"])

alert(Request["sex"])

</script><script language="JavaScript">

<!–

function Request(strName)

{

var strHref = "www.abc.com/index.htm?a=1&b=1&c=測試測試";

var intPos = strHref.indexOf("?");

var strRight = strHref.substr(intPos + 1);

var arrTmp = strRight.split("&");

for(var i = 0; i < arrTmp.length; i++)

{

var arrTemp = arrTmp[i ].split("=");

if(arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1];

}

return "";

}

alert(Request("a"));

alert(Request("b"));

alert(Request("c"));

//–>

</script>

<script>

String.prototype.getQuery = function(name)

{

var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

var r = this.substr(this.indexOf("?")+1).match(reg);

if (r!=null) return unescape(r[2]); return null;

}

var str ="www.abc.com/index.htm?a=1&b=1&c=測試測試";

alert(str.getQuery("a"));

alert(str.getQuery("b"));

alert(str.getQuery("c"));

</script

優點:取值方便.可以跨域.

缺點:值長度有限制

 

二:JavaScript靜態頁面值傳遞之Cookie篇

Cookie是瀏覽器存儲少量命名數據.

 

它與某個特定的網頁或網站關聯在一起.

 

Cookie用來給瀏覽器提供內存,

 

以便腳本和服務器程序可以在一個頁面中使用另一個頁面的輸入數據.

 

Post.htm

 

 

<input type="text" name="txt1">

<input type="button" value="Post">

<script language="javascript" >

function setCookie(name,value)

{

/*

*————— setCookie(name,value) —————–

* setCookie(name,value)

* 功能:設置得變量name的值

* 參數:name,字符串;value,字符串.

* 實例:setCookie('username','baobao')

*————— setCookie(name,value) —————–

*/

var Days = 30; //此cookie 將被保存30 天

  var exp = new Date();

exp.setTime(exp.getTime() + Days*24*60*60*1000);

document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

location.href = "Read.htm"; //接收頁面.

}

</script

 

Read.htm

 

 

 

<script language="javascript" >

function getCookie(name)

{

/*

*————— getCookie(name) —————–

* getCookie(name)

* 功能:取得變量name的值

* 參數:name,字符串.

* 實例:alert(getCookie("baobao"));

*————— getCookie(name) —————–

*/

var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));

if(arr !=null) return unescape(arr[2]); return null;

}

alert(getCookie("baobao"));

</script

優點:可以在同源內的任意網頁內訪問.生命期可以設置.

缺點:值長度有限制.

 

三:JavaScript靜態頁面值傳遞之Window.open篇

這兩窗口之間存在著關系.父窗口parent.htm打開子窗口son.htm

 

子窗口可以通過window.opener指向父窗口.這樣可以訪問父窗口的對象.

 

Post.htm

 

 

<input type=text name=maintext>

<input type=button value="Open">

Read.htm

<script language="javascript" >

//window.open打開的窗口.

//利用opener指向父窗口.

var parentText = window.opener.document.all.maintext.value;

alert(parentText);

</script

 

優點:取值方便.隻要window.opener指向父窗口,就可以訪問所有對象.不僅可以訪問值,還可以訪問父窗口的方法.值長度無限制.

缺點:兩窗口要存在著關系.就是利用window.open打開的窗口.不能跨域.

You May Also Like