动态加载图片路径 保持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 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
通用javascript脚本函数库 方便开发
Oct 13 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 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
如何在symfony中导出为CSV文件中的数据
2011/10/06 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
JS数组splice操作实例分析
2019/10/12 Javascript
Python学习资料
2007/02/08 Python
python使用cPickle模块序列化实例
2014/09/25 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
Java面向对象面试题
2016/12/26 面试题
2014年音乐教师工作总结
2014/12/03 职场文书
电力工程合作意向书
2015/05/11 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
Django框架中模型的用法
2022/06/10 Python
python语言中pandas字符串分割str.split()函数
2022/08/05 Python