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


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 相关文章推荐
网页里控制图片大小的相关代码
Jun 13 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 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
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
用Python进行TCP网络编程的教程
2015/04/29 Python
django-csrf使用和禁用方式
2020/03/13 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
python自动生成证件号的方法示例
2021/01/14 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
导师工作推荐信范文
2014/05/17 职场文书
销售岗位职责范本
2014/06/12 职场文书
启动仪式策划方案
2014/06/14 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers