静态页面间数据传递方法总结--Data transforming between static html pages
2011-09-20 10:15
1011 查看
静态压面间数据的传递方法很多,目前经搜索得到主要以下几种方法。但是静态页面间数据传递用处应该不会很多,在开发任务的前期由于需要做UI Mockup 给用户体验,简单的数据传递还是会用到,如有更好的方法请跟帖补充,不甚感激。此贴完善中。
注:
1.escape()及unescape()方法已过时,使用encodeURI() 和 decodeURI()对加入URL的参数进行编码;
2.很好的参考资料,《JavaScript 权威指南》(download from here),可以下载到英文版第六版,方便搜索附录中的API。
Window.open篇
这两窗口之间存在着关系.父窗口parent.htm打开子窗口son.htm
子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.
优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.
不仅可以访问值,还可以访问父窗口的方法.值长度无限制.
缺点:两窗口要存在着关系.就是利用window.open打开的窗口.不能跨域.
Post.html
Get.html
利用Cookie.
Cookie是浏览器存储少量命名数据.
它与某个特定的网页或网站关联在一起.
Cookie用来给浏览器提供内存,
以便脚本和服务器程序可以在一个页面中使用另一个页面的输入数据.
优点:可以在同源内的任意网页内访问.生命期可以设置.
缺点:值长度有限制.
Post.htm
Read.htm
URL篇
能过URL进行传值.把要传递的信息接在URL上.
优点:取值方便.可以跨域.
缺点:值长度有限制.
Post.htm
Read.htm
注:
1.escape()及unescape()方法已过时,使用encodeURI() 和 decodeURI()对加入URL的参数进行编码;
2.很好的参考资料,《JavaScript 权威指南》(download from here),可以下载到英文版第六版,方便搜索附录中的API。
Window.open篇
这两窗口之间存在着关系.父窗口parent.htm打开子窗口son.htm
子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.
优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.
不仅可以访问值,还可以访问父窗口的方法.值长度无限制.
缺点:两窗口要存在着关系.就是利用window.open打开的窗口.不能跨域.
Post.html
<input type=text name="maintext"> <button onclick = "openWindow()"> Post </button>
<script> function openWindow(){ window.open("get.html"); } </script>
Get.html
<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" 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 + "="+ encodeURI (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 decodeURI(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" value="Post" onclick = "Post()"> <script language="javascript" > function Post() { //单个值 Read.htm?username=baobao; //多全值 Read.htm?username=baobao&sex=male; url = "Read.htm?username="+encodeURI(document.all.username.value); url += "&sex=" + encodeRUI(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]]=decodeURI(strs[i].split("=")[1]); } } alert(Request["username"]) alert(Request["sex"]) </script>
相关文章推荐
- 静态页面间数据传递方法总结
- ASP.NET 动态转静态页面的两种方法总结 - 动态页面转换成HTML静态页面方法
- 利用js方法实现html静态页面间参数传递
- 利用js方法实现html静态页面间参数传递
- 静态HTML页面传递参数的方法 (表单)
- 静态页面HTML绑定动态数据.aspx,用document.write的方法!
- 静态HTML页面传递参数的方法 (表单)
- ASP.NET页面间数据传递方法总结及分析
- asp.net页面间数据传递方法总结篇
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
- ASP.NET 动态转静态页面的两种方法总结 - 动态页面转换成HTML静态页面方法
- ASP.NET页面间数据传递的方法总结
- 利用JavaScript方法实现静态html页面参数传递
- html静态页面传递参数-利用JavaScript方法实现静态
- html静态页面传递参数-利用JavaScript方法实现静态
- ASP.NET 动态转静态页面的两种方法总结 - 动态页面转换成HTML静态页面方法
- HTML页面间之间传递数据的两种方法
- 两个静态html页面传值方法的总结
- 静态HTML页面传递参数的方法
- ASP.NET 页面间数据传递方法小结