JS 参数传递的实际应用代码分析


Posted in Javascript onSeptember 13, 2009

原因很简单,在DOM中没有id为msg_box的div标签,该怎么解决这个问题呢?
方案:
在所有页面公用的头部文件header.tpl.html中写入:

<script> 
function changMenu(index){ 
if(typeof getElementById("msg_box") == "object"){ 
//如果存在msg_box对象 则刷新该页的对象 
showMenu(index); 
}else{ 
//如果不存在 则重定向到使用Ajax刷新的页面 
window.location = "/index.html"; 
} 
} 
</script>

但是该项目index.html存在四个相同性质的页面,都需要Ajax来刷新,这样就存在一个问题,当用户点击第三个栏目时,虽然可以回到index.html,但是无法刷新内容到第三个栏目。这时有两种解决方案:
方案1:
第一步:
在所有页面公用的头部文件header.tpl.html中写入:
<script> 
function changMenu(index){ 
if(typeof getElementById("msg_box") == "object"){ 
//如果存在msg_box对象 则刷新该页的对象 
showMenu(index); 
}else{ 
//如果不存在 则重定向到使用Ajax刷新的页面 
window.location = "/index.html?type="+index; 
} 
} 
</script>

第二步:
改进showMenu函数
function showMenu(index){ 
if(typeof getElementById("msg_box") == "object"){ 
//如果存在msg_box对象 则刷新该页的对象 
...... 
}else{ 
url = window.location.href; 
reg = /^(.*)\/index\.html\?type\=\d$/gi; 
if(reg.test(url)){ 
//如果符合传参数页面的url。则获取该参数 
index = url.substr(url.length - 1); 
...... 
} 
} 
}

方案2:
调用JS的cookie功能传递参数
在所有页面公用的头部文件header.tpl.html中写入:
<script> 
function changMenu(){ 
index = getCookie("index"); 
if(index == null) index = 1; 
if(typeof getElementById("msg_box") == "object"){ 
//如果存在msg_box对象 则刷新该页的对象 
showMenu(index); 
}else{ 
setCookie("index", index); 
//如果不存在 则重定向到使用Ajax刷新的页面 
window.location = "/index.html"; 
} 
} 
function setCookie(name, value){ 
 var Then = new Date()
 
 Then.setTime(Then.getTime() + 1*3600000 ) //小时
 
 document.cookie = name+"="+value+";expires="+Then.toGMTString();
 
} 
function getCookie(name) 
{ 
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); 
if(arr != null) return unescape(arr[2]); return null; 
} 
  
</script>
Javascript 相关文章推荐
javascript 显示当前系统时间代码
Dec 28 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
jQuery定义插件的方法
Dec 18 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
Ant design vue中的联动选择取消操作
Oct 31 Javascript
javascript类继承机制的原理分析
Sep 12 #Javascript
javascript 类定义的4种方法
Sep 12 #Javascript
一个简单的javascript类定义例子
Sep 12 #Javascript
一个简单的JavaScript 日期计算算法
Sep 11 #Javascript
关于javascript 回调函数中变量作用域的讨论
Sep 11 #Javascript
javascript 一些用法小结
Sep 11 #Javascript
JS 日期验证正则附asp日期格式化函数
Sep 11 #Javascript
You might like
PHP个人网站架设连环讲(二)
2006/10/09 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
详解json在php中的应用
2018/09/30 PHP
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
父页面显示遮罩层弹出半透明状态的dialog
2014/03/04 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
实习生自荐信范文
2013/11/13 职场文书
爱情检讨书大全
2014/01/21 职场文书
开学典礼主持词
2014/03/19 职场文书
公司节能减排方案
2014/05/16 职场文书
学校献爱心活动总结
2014/07/08 职场文书
主要领导对照检查材料
2014/08/26 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
基于redis+lua进行限流的方法
2022/07/23 Redis