利用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 保存文件到本地实现方法
Nov 29 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
php相对当前文件include其它文件的方法
2015/03/13 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
python实现指定ip端口扫描方式
2019/12/17 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Django权限设置及验证方式
2020/05/13 Python
什么是lambda函数
2013/09/17 面试题
护理专业自荐信
2013/12/03 职场文书
初三物理教学反思
2014/01/21 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
规范化管理年活动总结
2014/08/29 职场文书
酒店宣传语大全
2015/07/13 职场文书
贷款担保书范本
2015/09/22 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书