动态加载图片路径 保持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 相关文章推荐
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 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 和 HTML
2006/10/09 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
Jquery中getJSON在asp.net中的使用说明
2011/03/10 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
JavaScript操作HTML DOM节点的基础教程
2016/03/11 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
Python中异常重试的解决方案详解
2017/05/05 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
机电专业毕业生推荐信
2013/11/10 职场文书
客户表扬信范文
2014/01/10 职场文书
教师对学生的评语
2014/04/28 职场文书
2015年少先队活动总结
2015/03/25 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
Python Numpy库的超详细教程
2022/04/06 Python
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android