动态加载图片路径 保持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 相关文章推荐
jQuery ajax cache缓存问题
Jul 01 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
js实现文本框选中的方法
May 26 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
浅谈Node.js ORM框架Sequlize之表间关系
Jul 24 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
js实现tab栏切换效果
Aug 02 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
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
上传多个文件的PHP脚本
2006/11/26 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php之Memcache学习笔记
2013/06/17 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PDO::setAttribute讲解
2019/01/29 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
Python自动登录126邮箱的方法
2015/07/10 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
留学推荐信范文
2014/05/10 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
军训新闻稿范文
2015/07/17 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
Java 超详细讲解hashCode方法
2022/04/07 Java/Android
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python