JS頁面間傳值
一：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)
{
varstr = url.substr(1) //去掉?號
strs= str.split("&");
for(vari=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)
{
varreg = new RegExp("(^|&)"+ name+"=([^&]*)(&|$)");
varr = 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—>
<inputtype="text" name="txt1">
<inputtype="button" value="Post">
<scriptlanguage="javascript" >
functionsetCookie(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—>
<scriptlanguage="javascript" >
functiongetCookie(name)
{
/*
*---------------getCookie(name) -----------------
*getCookie(name)
* 功能:取得變數name的值
* 引數:name,字串.
* 例項:alert(getCookie("baobao"));
*---------------getCookie(name) -----------------
*/
var arr =document.cookie.match(new RegExp("(^|)"+name+"=([^;]*)(;|$)"));
if(arr !=null) returnunescape(arr[2]); return null;
}
alert(getCookie("baobao"));
</script>
優點:可以在同源內的任意網頁內訪問.生命期可以設定.
缺點:值長度有限制.
三：JavaScript靜態頁面值傳遞之Window.open篇
這兩視窗之間存在著關係.父視窗parent.htm開啟子視窗son.htm
子視窗可以通過window.opener指向父視窗.這樣可以訪問父視窗的物件.
<inputtype=text name=maintext>
<inputtype=button value="Open">
Read.htm
<scriptlanguage="javascript" >
//window.open開啟的視窗.
//利用opener指向父視窗.
varparentText = window.opener.document.all.maintext.value;
alert(parentText);
</script>
優點:取值方便.只要window.opener指向父視窗,就可以訪問所有物件.不僅可以訪問值,還可以訪問父視窗的方法.值長度無限制.
缺點:兩視窗要存在著關係.就是利用window.open開啟的視窗.不能跨域.