动态加载图片路径 保持JavaScript控件的相对独立性


Posted in Javascript onSeptember 06, 2010

当时考虑有三种方法:
1.直接把路径写在js文件里,但如果引用页面路径层级改变就没辙了。
2.写个class,放在主题包里的css文件或者单独创建一个css文件给日期控件专用。但是控件中的其他元素并没有使用class的需要,单独建立相应css文档似乎小题大做。
3.把以上两个方法排除后,自然要采用动态加载图片路径的方法咯。
关键代码如下:

//创建一个全局变量保存路径 
var imgRootUrl = ""; //获取图片路径所在目录 
var strPath=window.document.location.pathname; //获取主机地址之后的目录部分 
var thisUrlCount = strPath.split('/'); 
var hierarchyOfFolders = thisUrlCount.length-2;//获取目录层级 
for(iRoot=0;iRoot<hierarchyOfFolders;iRoot++) 
{ 
imgRootUrl +="../"; 
} 
imgRootUrl +="Images/"; //这个Images其实也可设为参数,由于所有项目图片文件夹命名固定,所以没有设立参数,但仍然保存可扩展性。

加图后,控件效果是相当美观了:
动态加载图片路径 保持JavaScript控件的相对独立性
顺便附上所有window.document.location其下属性:
document.location.hash // #号后的部分 VS window.location.hash
document.location.host // 域名+端口号
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目录部分(应用程序)
document.location.port // 端口号
document.location.protocol // 网络协议(http:)
document.location.search // ?号后的部分
Javascript 相关文章推荐
jquery 图片轮换效果
Jul 29 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
js数组依据下标删除元素
Apr 14 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
React如何创建组件
Jun 27 Javascript
Document对象内容集合(比较全)
Sep 06 #Javascript
Jquery优化效率 提升性能解决方案
Sep 06 #Javascript
jquery中this的使用说明
Sep 06 #Javascript
firefox下frameset取不到值的解决方法
Sep 06 #Javascript
js过滤数组重复元素的方法
Sep 05 #Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 #Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 #Javascript
You might like
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
PHP7 新特性详细介绍
2016/09/06 PHP
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
vue组件详解之使用slot分发内容
2018/04/09 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python3使用requests发闪存的方法
2016/05/11 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
信用卡工作证明模板
2014/09/14 职场文书
培训班开班主持词
2015/07/02 职场文书
导游词之桂林
2019/08/20 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL