javascript静态页面传值的三种方法分享

一时失言乱红尘 2022-09-22 13:00 153阅读 0赞

这篇文章介绍了javascript静态页面传值的三种方法及优缺点，有需要的朋友可以参考一下

**一：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

复制代码代码如下:

优点:取值方便.可以跨域.  
缺点:值长度有限制

**二：JavaScript静态页面值传递之Cookie篇**  
Cookie是浏览器存储少量命名数据.  
它与某个特定的网页或网站关联在一起.  
Cookie用来给浏览器提供内存,  
以便脚本和服务器程序可以在一个页面中使用另一个页面的输入数据.  
Post.htm

复制代码代码如下:

<input type="text" name="txt1">  
<input type="button" value="Post">  
<script language="javascript" >  
function setCookie(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

复制代码代码如下:

优点:可以在同源内的任意网页内访问.生命期可以设置.  
缺点:值长度有限制.

**三：JavaScript静态页面值传递之Window.open篇**  
这两窗口之间存在着关系.父窗口parent.htm打开子窗口son.htm  
子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.  
Post.htm

复制代码代码如下:

<input type=text name=maintext>  
<input type=button value="Open">  
Read.htm  
<script language="javascript" >  
//window.open打开的窗口.  
//利用opener指向父窗口.  
var parentText = window.opener.document.all.maintext.value;  
alert(parentText);  
</script>

优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制.  
缺点:两窗口要存在着关系.就是利用window.open打开的窗口.不能跨域.