利用js跨页面保存变量做菜单的方法


Posted in Javascript onJanuary 17, 2008

最近公司在做一个项目,其中一块头部的菜单导航区,要求实现进入相关页面后上面的导航菜单图片也需变换.而这个对于静态页面或者用框架或iframe的来说是很容易实现的.而我们是利用include来包含进的这个top.asp.虽然可以在那个图片菜单上定义onclick的动作属性.但是只要一跳转页面,则这个onclick动作就没用了.因为top.asp被重新加载了.如果要解决这个问题,只能是在页面加载时能读取一个全局的变量,相对于浏览器的全局变量,通过这个变量的值来判断应该如何显示这个导航菜单.于是也便有了本文.

我想到的解决方法有两种:

1.利用cookies或session,在每个页面加载时写一个cookies或session变量,这个看似能很好的解决问题.但是却出现了一个问题.那就是如果用户禁止了cookies,则这个效果将无法实现,永远只是显示默认效果.所以我放弃这种做法

2.利用history或navigator来建立这么一个相对于浏览器的变量.只要我浏览器没关,则这个变量就会持续存在.这样就达到了我们想要的效果.我也是用这种方法来解决的.下面是具体实现部分.

 

                                   
                                                                                           
利用js跨页面保存变量做菜单的方法 利用js跨页面保存变量做菜单的方法利用js跨页面保存变量做菜单的方法利用js跨页面保存变量做菜单的方法利用js跨页面保存变量做菜单的方法 
 
                                                                                               
利用js跨页面保存变量做菜单的方法利用js跨页面保存变量做菜单的方法利用js跨页面保存变量做菜单的方法利用js跨页面保存变量做菜单的方法利用js跨页面保存变量做菜单的方法利用js跨页面保存变量做菜单的方法 利用js跨页面保存变量做菜单的方法
                                                                                                                           
 利用js跨页面保存变量做菜单的方法利用js跨页面保存变量做菜单的方法 利用js跨页面保存变量做菜单的方法  站内搜索  
利用js跨页面保存变量做菜单的方法公告 to trash cans, find the Public Utility Equipment new!
利用js跨页面保存变量做菜单的方法

 

这种的效果如下:

先看首页:

利用js跨页面保存变量做菜单的方法

再看按下订单查看按钮后的效果:我用的触发脚本是在上面代码中的onclick="menushow(2)"即传递一个2做为实参,从而设置history.dmenu=2这样在页面刷新加载时就会判断出当前状态了.因为这个变量是相对于浏览器的.效果如下:

利用js跨页面保存变量做菜单的方法

今天测试时发现了一个问题,得用上面写的方法时对IE不支持,在火狐上没有问题,所以对程序进行了下小修改.过程是这样的.对于IE浏览器使用session来判断,每按一个按钮时就写一个session("dmenu")为相应的值,然后把这个值写在页面的一个隐藏域里,然后在页面初始化时判断是使用的什么类型浏览器,如果是IE的就执行通过session来判断的函数,而这个session则是通过获取那个隐藏域里的值,而如果是非IE浏览器就运用上面我昨天写的也就是上面的init函数来进行.判断代码如下: 如此一来就完美的解决了这个问题.也许有朋友会说用session就可以了,但经过我的实验是用session火狐的根本不认,我也不知道什么原因,所以只好用我这个方法了.如果你有好方法请告诉我.
Javascript 相关文章推荐
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
Jquery iframe内部出滚动条
Feb 11 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 #Javascript
JavaScript表单常用验证集合
Jan 16 #Javascript
JavaScript的Cookies
Jan 16 #Javascript
JavaScript中的对象化编程
Jan 16 #Javascript
JavaScript中的事件处理
Jan 16 #Javascript
JavaScript中的其他对象
Jan 16 #Javascript
JavaScript中的Document文档对象
Jan 16 #Javascript
You might like
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
三种php连接access数据库方法
2013/11/11 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
javascript中强制执行toString()具体实现
2013/04/27 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
理解Koa2中的async&await的用法
2018/02/05 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
python批量修改ssh密码的实现
2019/08/08 Python
Python函数参数分类原理详解
2020/05/28 Python
python中四舍五入的正确打开方式
2021/01/18 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
优秀应届毕业生自荐信
2013/11/16 职场文书
学年自我鉴定
2014/01/16 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS
比较几种Redis集群方案
2021/06/21 Redis
SQL Server实现分页方法介绍
2022/03/16 SQL Server
nginx 配置指令之location使用详解
2022/05/25 Servers