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


Posted in Javascript onNovember 12, 2013

一: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
<script language="javascript" >
/*
*--------------- 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 = "3water.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>
<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 ="3water.com/index.htm?a=1&b=1&c=测试测试";
alert(str.getQuery("a"));
alert(str.getQuery("b"));
alert(str.getQuery("c"));
</script>

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

二: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

<script language="javascript" >
function getCookie(name)
{
/*
*--------------- getCookie(name) -----------------
* getCookie(name)
* 功能:取得变量name的值
* 参数:name,字符串.
* 实例:alert(getCookie("baobao"));
*--------------- getCookie(name) -----------------
*/
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr !=null) return unescape(arr[2]); return null;
}
alert(getCookie("baobao"));
</script>

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

三: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打开的窗口.不能跨域.

Javascript 相关文章推荐
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
js实现一个简易计算器
Mar 30 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
javascript的渐进增强与平稳退化浅谈
Nov 12 #Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 #Javascript
JavaScript中的字符串操作详解
Nov 12 #Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 #Javascript
判定是否原生方法的JS代码
Nov 12 #Javascript
给文字加上着重号的JS代码
Nov 12 #Javascript
深入理解javascript动态插入技术
Nov 12 #Javascript
You might like
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
鼠标图片振动代码
2006/07/06 Javascript
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
js选项卡的制作方法
2017/01/23 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
python字符串循环左移
2019/03/08 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
中学实习教师自我鉴定
2013/12/12 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书