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


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 学习笔记 选择器之五
Jul 23 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 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数组
2006/10/09 PHP
用php写的serv-u的web申请账号的程序
2006/10/09 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
详解Bootstrap插件
2016/04/25 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
跟老齐学Python之模块的加载
2014/10/24 Python
python读写二进制文件的方法
2015/05/09 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Python对象属性自动更新操作示例
2018/06/15 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
python调用pyaudio使用麦克风录制wav声音文件的教程
2019/06/26 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
python调用百度API实现人脸识别
2020/11/17 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
美国在线家具网站:GDFStudio
2021/03/13 全球购物
数控技术专业推荐信
2013/11/01 职场文书
小学数学国培感言
2014/03/10 职场文书
护士工作失误检讨书
2014/09/14 职场文书
毕业实习感受与体会
2015/05/26 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
Java 关于String字符串原理上的问题
2022/04/07 Java/Android
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers