动态加载图片路径 保持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 相关文章推荐
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
AngularJS日程表案例详解
Aug 15 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
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数据库表操作的封装类及用法实例详解
2016/07/12 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
PHP时间类完整代码实例
2021/02/26 PHP
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
用原生js做单页应用
2017/01/17 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
Python实现Const详解
2015/01/27 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
劳资专员岗位职责
2013/12/27 职场文书
25岁生日感言
2014/01/13 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
任长霞观后感
2015/06/16 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
nginx 配置指令之location使用详解
2022/05/25 Servers
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技