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打开的窗口，不能跨域。