利用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下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
window.name代替cookie的实现代码
Nov 28 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
浅谈JavaScript字符集
May 22 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 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和MySQL保存和输出图片
2006/10/09 PHP
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
深入理解PHP内核(一)
2015/11/10 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
IE 下的只读 innerHTML
2009/08/21 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
python如何实现复制目录到指定目录
2020/02/13 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
物流毕业生个人的自我评价
2014/02/13 职场文书
体育节口号
2014/06/19 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
贷款工作证明模板
2015/06/12 职场文书