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 06 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
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 strtr() 函数使用说明
2008/11/21 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
实例解析php的数据类型
2018/10/24 PHP
jquery cookie插件代码类
2009/05/26 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
jQuery实现文档树效果
2017/02/20 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
Zookeeper接口kazoo实例解析
2018/01/22 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
物业管理应届生求职信
2013/10/28 职场文书
优秀教师工作感言
2014/02/16 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
护士毕业实习感言
2014/03/05 职场文书
清扬洗发水广告词
2014/03/14 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
计划生育宣传标语
2014/06/21 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
演讲开场白和结束语
2015/05/29 职场文书
怎样写观后感
2015/06/19 职场文书
2016年政治理论学习心得体会
2016/01/25 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL