动态加载图片路径 保持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 相关文章推荐
通过DOM脚本去设置样式信息
Sep 19 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
Vue生命周期示例详解
Apr 12 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 Javascript
HTML+JS实现在线朗读器
Feb 15 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使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
浅析PHP开发规范
2018/02/05 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
Array.prototype 的泛型应用分析
2010/04/30 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
JS画线(实例代码)
2013/11/20 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python使用Matlab命令过程解析
2020/06/04 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
python palywright库基本使用
2021/01/21 Python
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
单位介绍信格式
2015/01/31 职场文书
小学六一主持词开场白
2015/05/28 职场文书