JavaScript 頁面間傳值

轉自：http://blog.csdn.net/qq380107165/article/details/7330612

 

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

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

例：

• 參數傳出頁面Post01.html

  姓名：<input type="text" name="username">
  性別：<input type="text" name="sex">
  <input type="button" value="傳值給Read頁面" onclick="Post()">
  
  <script language="javascript" >
  function Post()    {
  　　//單個值 Read.htm?username=baobao;
  　　//多全值 Read.htm?username=baobao&sex=male;
  　　var url = "Read.html?username="+decodeURI(document.all.username.value);
  　　url += "&sex=" + decodeURI(document.all.sex.value);
  　　location.href = url;
  }
  </script>

   

•  參數接收頁面Read01.html

方法一：

var url=location.search;
var Request = new Object();
if(url.indexOf("?")!=-1)
{
　　var str = url.substr(1),　//去掉?號
        aStrs= str.split("&");
　　for(var i=0;i<aStrs.length;i++)
　　{
　　 　 Request[aStrs[i].split("=")[0]]=decodeURIComponent(aStrs[i].split("=")[1]);
　　    }
}
alert('姓名：' + Request["username"]);
alert('性別：' + Request["sex"]);

 

方法二：封裝為Request函數

function Request(url,strName)
{
    var strHref = url;
    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(decodeURIComponent(arrTemp[0]).toUpperCase() == strName.toUpperCase())
        return decodeURIComponent(arrTemp[1]);
    }
    return "";
}
alert('姓名：' + Request(location.search,"username"));
alert('性別：' + Request(location.search,"sex"));

 

方法三：在String.prototype上添加方法

String.prototype.getQuery = function(name)
{
　　var reg = new RegExp("(^|&)"+ name+"=([^&]*)(&|$)");
　　var r = this.substr(this.indexOf("?")+1).match(reg);
　　if(r!=null) return decodeURIComponent(r[2]); 
    return null;
}
var str = location.search;
alert('姓名：' + str.getQuery("username"));
alert('性別：' + str.getQuery("sex"));

優點:取值方便.可以跨域.
缺點:值長度有限制

 

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

Cookie是瀏覽器存儲少量命名數據，它與某個特定的網頁或網站關聯在一起。

Cookie用來給瀏覽器提供內存,以便腳本和服務器程序可以在一個頁面中使用另一個頁面的輸入數據。

例：

• 參數傳出頁面Post02.html

  <input type="text" name="txt1">
  <input type="button" value="Post" id="btn">
  <script>
      function setCookie(name,value)
      {
      　　var Days = 30; //此 cookie 將被保存 30 天
      　　var exp　= new Date();
      　　exp.setTime(exp.getTime() +Days*24*60*60*1000);
      　　document.cookie = name +"="+ decodeURI(value) + ";expires=" + exp.toGMTString();
      　　location.href = "Read02.html";//接收頁面.
      }
      var oBtn = document.getElementById('btn');
      oBtn.onclick = function(){
          setCookie('mycookie',document.all.txt1.value);
      }
  </script>

   

• 參數接收頁面Read02.html

  function getCookie(name)
  {
  　　var arr =document.cookie.match(new RegExp("(^|)"+name+"=([^;]*)(;|$)"));
  　　if(arr !=null) return decodeURIComponent(arr[2]); return null;
  }
  alert(getCookie("mycookie"));

  優點:可以在同源內的任意網頁內訪問，生命期可以設置。
  缺點:值長度有限制。

 

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

這兩窗口之間存在着關系，父窗口parent.html打開子窗口son.html。

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

例：

• 參數傳出頁面parent.html

  <input type="text" name="maintext">
  <input type="button" value="Open" id="btn">
  <script>
      var oBtn = document.getElementById('btn');
      oBtn.onclick = function(){
          // window.open(URL,name,features,replace)
          // URL->新窗口地址; name->新窗口的名稱; features->新窗口要顯示的標准瀏覽器的特征; 
          // replace->裝載到窗口的 URL 是在窗口的瀏覽歷史中創建一個新條目，還是替換瀏覽歷史中的當前條目
          window.open('Read03.html');
      }
  </script>

   

• 參數接收頁面son.html

  //window.open打開的窗口.
  //利用opener指向父窗口.
  var parentText = window.opener.document.all.maintext.value;
  alert(parentText);

  優點:取值方便，只要window.opener指向父窗口,就可以訪問所有對象。不僅可以訪問值，還可以訪問父窗口的方法，值長度無限制。
  缺點:兩窗口要存在着關系，就是利用window.open打開的窗口，不能跨域。