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


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 相关文章推荐
DOM相关内容速查手册
Feb 07 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
vue组件间通信解析
Mar 01 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
JS遍历树层级关系实现原理解析
Aug 31 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下读取文本文件的代码
2008/07/02 PHP
php实现对象克隆的方法
2015/06/20 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
window.open被浏览器拦截后的自定义提示效果代码
2007/11/19 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
再探JavaScript作用域
2014/09/24 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
基于python的七种经典排序算法(推荐)
2016/12/08 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
python去掉空白行的多种实现代码
2018/03/19 Python
对pandas中apply函数的用法详解
2018/04/10 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
接口的多继承会带来哪些问题
2015/08/17 面试题
餐饮业创业计划书范文
2014/01/06 职场文书
小王子读书笔记
2015/06/29 职场文书