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


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 相关文章推荐
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 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设计模式  Command(命令模式)
2011/06/17 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
Python中的字典遍历备忘
2015/01/17 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书