JS页面间传值
黑猫科技 宋笑迎
一：JavaScript静态页面值传递之URL篇
通过URL进行传值.把要传递的信息接在URL上.
例子：
传出参数的页面post.html
-------------------------------------------------------------------------------
用户名：
性别：
function Post(){
//单个值Read.html?username=baobao;
//多个值Read.html?username=baobao&sex=male;
// location.href="http://www.baodu.com"跳转到指定地址
url = "read.html?username="+escape(document.all.username.value);
url+= "&sex=" + escape(document.all.sex.value);
location.href=url;
}
document.querySelector('#post').onclick = function(){
Post();
};
-------------------------------------------------------------------------------
接收参数的页面read.html
-------------------------------------------------------------------------------
// location.search是客户端获取url参数的方法，是从当前url的？号开始的字符串。如当前url是“http://www.baodu.con?a=1&b=2”那么search的值就是“?a=1&b=2”
// escape()与unecape()方法：对字符串进行编码和解码，例：escape("宋") ---输出%5b8bunescape("%5b8b")----输出宋
var url = location.search;
var Request = new Object();
if(url.indexOf("?")!=-1){
var str = url.substr(1);//去掉?号
var strs = str.split("&");
for(var i=0;i
Request[strs[i].split("=")[0]]=unescape(strs[ i].split("=")[1]);
console.log([strs[i].split("=")[0]]+":"+unescape(strs[ i].split("=")[1]));
}
console.log(Request);
}
优点:取值方便.可以跨域.
缺点:值长度有限制
二：JavaScript静态页面值传递之Cookie篇
参数传出页面post2.html
-------------------------------------------------------------------------------
请输入你的名字：
function setCookie(name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=name+ "=" +escape(value)+((expiredays==null) ? "" : "; expires="+exdate.toGMTString());
location.href="read2.html";
}
document.querySelector('#post').onclick=function(){
var value = document.querySelector('#txt1').value;
console.log(escape(value));
setCookie('name',value,30);
}
-------------------------------------------------------------------------------
接收参数的页面read2.html
-------------------------------------------------------------------------------
function getCookie(name){
if (document.cookie.length>0){
c_start=document.cookie.indexOf(name + "=")
if (c_start!=-1){
c_start=c_start + name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
console.log((getCookie("name")));
-------------------------------------------------------------------------------
优点:可以在同源内的任意网页内访问.生命期可以设置.
缺点:值长度有限制.
三：JavaScript静态页面值传递之Window.open篇
这两窗口之间存在着关系.父窗口parent.html打开子窗口son.html
子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.
read.html
//window.open打开的窗口.
//利用opener指向父窗口.
var parentText = window.opener.document.all.maintext.value;
alert(parentText);
优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制.
缺点:两窗口要存在着关系.就是利用window.open打开的窗口.不能跨域.
