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


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 相关文章推荐
jquery单行文字向上滚动效果示例
Mar 06 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
jquery-tips悬浮提示插件分享
Jul 31 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
微信小程序 开发之顶部导航栏实例代码
Feb 23 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
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
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
用js重建星际争霸
2006/12/22 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
2014/04/04 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
Python创建日历实例
2014/08/21 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python文件操作,open读写文件,追加文本内容实例
2016/12/14 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
人机交互程序 python实现人机对话
2017/11/14 Python
python保存数据到本地文件的方法
2018/06/23 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
Python打印不合法的文件名
2020/07/31 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
合理化建议书
2015/02/04 职场文书
留学推荐信怎么写
2015/03/26 职场文书
贫困生证明范文
2015/06/16 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL