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


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 随机展示头像实现代码
Dec 06 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
分享9点个人认为比较重要的javascript 编程技巧
Apr 27 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
Bootstrap响应式侧边栏改进版
Sep 17 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
微信小程序的日期选择器的实例详解
Sep 29 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
关于vue中如何监听数组变化
Apr 28 Vue.js
关于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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
php实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
PHP魔术方法使用方法汇总
2016/02/14 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
2012/01/15 Javascript
js限制文本框只能输入数字(正则表达式)
2012/07/15 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
AngularJS语法详解
2015/01/23 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
python中list循环语句用法实例
2014/11/10 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
python如何修改装饰器中参数
2018/03/20 Python
基于Python List的赋值方法
2018/06/23 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
复核员上岗演讲稿
2014/01/05 职场文书
投标单位介绍信
2014/01/09 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
干部对照检查材料范文
2014/08/26 职场文书
2014年社区教育工作总结
2014/12/02 职场文书