静态页面的值传递(三部曲)


Posted in Javascript onSeptember 25, 2006

这两窗口之间存在着关系.父窗口parent.htm打开子窗口son.htm
子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.

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

Post.htm

<input type=text name=maintext>
<input type=button onclick="window.open('Read.htm')" value="Open">

Read.htm

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

利用Cookie.

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

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

Post.htm

<input type="text" name="txt1">
<input type="button" onclick="setCookie('baobao',document.all.txt1.value)" 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>

 URL篇

能过URL进行传值.把要传递的信息接在URL上.

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

Post.htm

<input type="text" name="username">
<input type="text" name="sex">
<input type="button" onclick="Post()" 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>

Javascript 相关文章推荐
JS之小练习代码
Oct 12 Javascript
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
js实现时分秒倒计时
Dec 03 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
关于Blog顶部的滚动导航条代码
Sep 25 #Javascript
初学prototype,发个JS接受URL参数的代码
Sep 25 #Javascript
浅谈JavaScript中面向对象技术的模拟
Sep 25 #Javascript
理解JavaScript中的事件
Sep 23 #Javascript
Valerio 发布了 Mootools
Sep 23 #Javascript
prototype.js的Ajax对象
Sep 23 #Javascript
在Javascript中为String对象添加trim,ltrim,rtrim方法
Sep 22 #Javascript
You might like
用PHP 4.2书写安全的脚本
2006/10/09 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
php实现可运算的验证码
2015/11/10 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
jQuery学习笔记之Helloworld
2010/12/22 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
jQuery老黄历完整实现方法
2015/01/16 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
JSONObject与JSONArray使用方法解析
2020/09/28 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
求职信格式范本
2013/11/15 职场文书
委托书模板
2014/04/04 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
蓬莱阁导游词
2015/02/04 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书