利用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 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 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 FPDF类库应用实现代码
2009/03/20 PHP
php 文章采集正则代码
2009/12/28 PHP
PHP 面向对象详解
2012/09/13 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
PHP中常用的转义函数
2014/02/28 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
jquery对ajax的支持介绍
2013/12/10 Javascript
js 通用订单代码
2013/12/23 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
深入源码解析Python中的对象与类型
2015/12/11 Python
全面分析Python的优点和缺点
2018/02/07 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
高一物理教学反思
2014/01/24 职场文书
求职信需要的五点内容
2014/02/01 职场文书
主管竞聘书范文
2014/03/31 职场文书
借款担保书范文
2014/05/13 职场文书
清明节演讲稿
2014/05/27 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
初三化学教学反思
2016/02/22 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技