动态加载图片路径 保持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 相关文章推荐
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
node创建Vue项目步骤详解
Mar 06 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
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
php银联网页支付实现方法
2015/03/04 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
Python对字符串实现去重操作的方法示例
2017/08/11 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
彻底理解Python中的yield关键字
2019/04/01 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
中专三年学习的个人自我评价
2013/12/12 职场文书
公司活动方案范文
2014/03/06 职场文书
篝火晚会主持词
2014/03/25 职场文书
个人承诺书
2014/03/26 职场文书
公司寄语大全
2014/04/10 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
文明寝室标语
2014/06/13 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
大学生支教感言
2015/08/01 职场文书