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


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 相关文章推荐
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 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如何将XML转成数组
2016/04/04 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
vue监听scroll的坑的解决方法
2017/09/07 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
taro小程序添加骨架屏的实现代码
2019/11/15 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
怎么使用pipenv管理你的python项目
2018/03/12 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
pow在python中的含义及用法
2019/07/11 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
Python使用xpath实现图片爬取
2020/09/16 Python
python音频处理的示例详解
2020/12/23 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
收银员的岗位职责范本
2014/02/04 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
二人合伙经营协议书
2014/09/13 职场文书
志愿者个人总结
2015/03/03 职场文书