动态加载图片路径 保持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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
JavaScript中的闭包原理分析
Mar 08 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
javascript适合移动端的日期时间拾取器
Nov 10 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 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编程语言开发动态WAP页面
2006/10/09 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
浅谈PHP进程管理
2019/03/08 PHP
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
js实现简单进度条效果
2020/03/25 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
python读取csv文件示例(python操作csv)
2014/03/11 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
python制作图片缩略图
2019/04/30 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
python3调用windows dos命令的例子
2019/08/14 Python
python爬虫可以爬什么
2020/06/16 Python
联想C++笔试题
2012/06/13 面试题
如何利用cmp命令比较文件
2016/04/11 面试题
How TDD works
2012/09/30 面试题
酒店前厅员工辞职信
2014/01/08 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
运动会跳远加油稿
2014/02/20 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
房屋过户委托书范本
2014/10/07 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
营销计划书范文
2015/01/17 职场文书
校车安全管理责任书
2015/05/11 职场文书