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


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 相关文章推荐
增强的 JavaScript 的 trim 函数的代码
Aug 13 Javascript
JS 表单验证大全
Nov 23 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 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
19个超实用的PHP代码片段
2014/03/14 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
python文件写入实例分析
2015/04/08 Python
python difflib模块示例讲解
2017/09/13 Python
Python hashlib模块的使用示例
2020/10/09 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
python 实现图片批量压缩的示例
2020/12/18 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
文明礼仪小标兵事迹
2014/01/12 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
Python中的 Set 与 dict
2022/03/13 Python