javascript中外部js文件取得自身完整路径得办法

简介: 原文:javascript中外部js文件取得自身完整路径得办法有时候我们需要引入一个外部js文件,这个js文件又需要用到自己的路径或者是所在的目录,别问怎么又这么变态的需求,开发做久了各种奇葩需求也就有了! 有人第一时间想到的是location.href,可是哥哥,那个引用页面的路径啊。
原文: javascript中外部js文件取得自身完整路径得办法

有时候我们需要引入一个外部js文件,这个js文件又需要用到自己的路径或者是所在的目录,别问怎么又这么变态的需求,开发做久了各种奇葩需求也就有了!

有人第一时间想到的是location.href,可是哥哥,那个引用页面的路径啊。比如a.html:

<html>
<script src="/b/c.js"></script>
</html>

这样的话我们用location.href获取到的值是a.html文件本身的路径,并不是我们需要的c.js的路径。

那怎么办?

我先开始想到了一个方法,就是通过js的文件名去匹配,比如我写一个插件叫做dragondean.js,那么我可以将引用页(a.html)中所有的script标签获取到,然后通过匹配src属性中是否含有dragondean来获得我们需要的js文件路径。

但是这样一来就有问题了:

1.我们的插件dragondean.js在使用的时候不能被更名。

2.一个插件的js文件重复引用会导致错误

这种方式总是没有一种踏实的感觉...

后来.....我看了一片文章:http://blog.sina.com.cn/s/blog_715fa5c00100pwrj.html

里面提到的思路用到了浏览器对网页加载顺序的一个技巧,经过测试确实可行!

原理就是网页文档在解析的时候一边加载一边解析,当解析到script的时候先下载src中的内容并解析或者解析script中间的内容,然后再往下解析。当解析到当前script的时候我们可以获取已经加载的所有script标签,最后一个就是我们需要得到的这个了。

用到的方法代码如下:

获取自身的完整路径:

function getMySrc(){
    var scriptSrc = document.getElementsByTagName('script')[document.getElementsByTagName('script').length -1].src;
    return scriptSrc;
}

 

获得自身的文件名:

function getMyScriptName(){
    var scriptSrc = document.getElementsByTagName('script')[document.getElementsByTagName('script').length -1].src;
    var jsName = scriptSrc.split('/')[scriptSrc.split('/').length-1];
    return jsName;
}

 

获得自身所在的目录路径:

function getMyPath(){
    var scriptSrc = document.getElementsByTagName('script')[document.getElementsByTagName('script').length -1].src;
    var jsName = scriptSrc.split('/')[scriptSrc.split('/').length-1];
    return scriptSrc.replace(jsName,'');
}

 

这些内容都是借鉴的前面那篇博文的,只不过做了一个细化!再次感谢原文作者!

 

目录
相关文章
|
8月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
230 1
|
7月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
2174 0
|
10月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
629 24
|
10月前
|
监控 算法 JavaScript
基于 JavaScript 图算法的局域网网络访问控制模型构建及局域网禁止上网软件的技术实现路径研究
本文探讨局域网网络访问控制软件的技术框架,将其核心功能映射为图论模型,通过节点与边表示终端设备及访问关系。以JavaScript实现DFS算法,模拟访问权限判断,优化动态策略更新与多层级访问控制。结合流量监控数据,提升网络安全响应能力,为企业自主研发提供理论支持,推动智能化演进,助力数字化管理。
271 4
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
286 32
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
456 0
Next.js 实战 (六):如何实现文件本地上传
|
JavaScript 前端开发 算法
PathFinding.js – 综合性的 JavaScript 路径查找库
  PathFinding.js 是一个综合性的 JavaScript 路径查找库。这个项目的目的是提供一个可以很容易地纳入网页游戏的路径查找库。它可以运行在 Node.js 或浏览器中。提供的在线演示展示了算法是如何执行的。
1369 0