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


Posted in Javascript onSeptember 03, 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 相关文章推荐
Javascript模块化编程详解
Dec 01 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 Javascript
jQuery文字轮播特效
Feb 12 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
详细分析单线程JS执行问题
Nov 22 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
js代码实现轮播图
May 04 Javascript
Dojo 学习要点
Sep 03 #Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 #Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 #Javascript
Jquery中dialog属性小记
Sep 03 #Javascript
javascript中使用css需要注意的地方小结
Sep 01 #Javascript
js截取函数(indexOf,join等)
Sep 01 #Javascript
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 #Javascript
You might like
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
JS继承用法实例分析
2015/02/05 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
javascript操作cookie
2017/01/17 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
员工培训邀请函
2014/02/02 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
低碳环保演讲稿
2014/08/28 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers