JS實作HTML靜态頁傳值的方法

作者：前端開發-武方博 釋出：2012-10-29 分類：

javascript

 閱讀：8,735次

此處使用JS方式實作靜态頁之間值傳遞，其實很簡單，廢話不多說，見代碼，先看index.html頁代碼，如下：

在body标簽之間 加此行代碼

<form action=”a.html?d1=123&d2=你好” method=”post” name=”f1″ id=”f1″>

<input type=”submit” name=”s1″ id=”s1″ value=”送出”/>

</form>

然後，我我們建立a.html新頁，同樣在body标簽之間加此行代碼，如下：

<script type=”text/javascript”>

var tmpArr;

var QueryString;

var URL = document.location.toString();

if(URL.lastIndexOf(“?”)!=-1){

QueryString= URL.substring(URL.lastIndexOf(“?”)+1,URL.length);

tmpArr=QueryString.split(“&”);

for (i=0;i<=tmpArr.length – 1;i++) {

document.write(“參數為：” + tmpArr[i] + “<br/>”);

}

else{

QueryString = “”;

</script>

一些其它的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;

參數接收頁面Read.htm—>

/*

*————— 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>

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”));

優點:取值友善.可以跨域.

缺點:值長度有限制

二：JavaScript靜态頁面值傳遞之Cookie篇

Cookie是浏覽器存儲少量命名資料.

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

Cookie用來給浏覽器提供記憶體,

以便腳本和伺服器程式可以在一個頁面中使用另一個頁面的輸入資料.

<input type=”text” name=”txt1″>

function setCookie(name,value)

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

* setCookie(name,value)

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

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

* 執行個體:setCookie(‘username’,’baobao’)

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”; //接收頁面.

function getCookie(name)

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

* getCookie(name)

* 功能:取得變量name的值

* 參數:name,字元串.

* 執行個體:alert(getCookie(“baobao”));

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

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

alert(getCookie(“baobao”));

優點:可以在同源内的任意網頁内通路.生命期可以設定.

缺點:值長度有限制.

三：JavaScript靜态頁面值傳遞之Window.open篇

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

子視窗可以通過window.opener指向父視窗.這樣可以通路父視窗的對象.

<input type=text name=maintext>

<input type=button value=”Open”>

Read.htm

//window.open打開的視窗.

//利用opener指向父視窗.

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

alert(parentText);

優點:取值友善.隻要window.opener指向父視窗,就可以通路所有對象.不僅可以通路值,還可以通路父視窗的方法.值長度無限制.

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

轉載請注明：

 - 

前端開發-武方博