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 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
php与js的区别是什么
Aug 05 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
webpack安装配置与常见使用过程详解(结合vue)
Jun 01 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一些十分严重的缺陷详解
2013/06/03 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
python ubplot使用方法解析
2020/01/10 Python
PyQt5中多线程模块QThread使用方法的实现
2020/01/31 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
详解Anaconda 的安装教程
2020/09/23 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
计算机专业大学生的自我评价
2013/11/14 职场文书
企业承诺书怎么写
2014/05/24 职场文书
业务内勤岗位职责
2015/04/13 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书