原文: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,'');
}

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

javascript中外部js文件取得自身完整路径得办法的更多相关文章

  1. eclipse中jquery.js文件有错误提示…

    eclipse中jquery.js文件有错误提示的解决办法 2013-04-06 19:18 浏览次数:382 由于jquery.js文件进行了压缩,压缩之后的语法eclipse无法完全识别,所以有错 ...

  2. kettle转换JavaScript加载外部js文件

    日常开发中,时常会出现这样一种情况.有大量的函数是通用的.而每个JavaScript里面写一遍,给维护带来很大的困扰.因而需要将公共的函数写在外部js文件中.这时就需要引入外部的公共文件了.下面是在转 ...

  3. 在SharePoint解决方案中使用JavaScript (1) – 引用.js文件

    本文是系列文章的第一篇. 在SharePoint解决方案中使用JavaScript (0) 作为在SharePoint应用程序中使用JavaScript的第一步,就是要知道如何将一个写好的.js文件, ...

  4. win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件

    win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件 我杀过 w3wp.exe和asp.net_state的进程,重启 iis admin的服务,都还是不行. 只是把 ...

  5. vue2项目中引用外部js文件

    vue2项目目录如下(utils文件夹是自己手工建的,然后在utils里新建js文件): 使用import导入文件时,注意路径,路径不对会报错: 导入之后使用外部js函数时,直接写导入时的名字加小括号 ...

  6. html中引入外部js文件,使用外部js文件里的方法

    外部js文件1: /** * 加了window.onload 后,直接引入js文件即可 * 页面资源全部加载完毕后会自动调用window.onload里的回调函数 */ window.addEvent ...

  7. 延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)

    js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载: 1.首先简单说一下js文件的3种延迟加载方式: (1)<script type="text ...

  8. 为什么要采用外部js文件

    这篇文章主要讲的是为什么要采用外部js文件,有什么好处. 为什么不把js内嵌在html中呢,这样不是好分析吗?对,这样你是好分析,同样的别人呢?不内嵌在html中有如下原因:   安全性: 只要查看页 ...

  9. AJAX载入外部JS文件到页面并让其执行的方法(附源码)

    一. 向HTML页面中动态添加JS文件(从外部载入)并让其执行的两种方法 1.只适用于IE浏览器的简单方法: 先在文档中放置一张JS"空床"并添加ID:<script id= ...

随机推荐

  1. C++ 中dynamic_cast&lt;&gt;的用法

    /*这是从网上摘下的样例,主要讲述了 dynamic_cast<> 的用法.*/ /* 作用:将一个基类对象指针(或引用)cast到继承类指针,dynamic_cast会依据基类指针是否真 ...

  2. android 从服务器上获取APK并下载安装

    简单的为新手做个分享.    网上有些资料,不过都是很零散,或是很乱的,有的人说看不懂.    一直有新手说 做到服务器更新APK时没有思路,这里做个简单的分享,希望有不同思路的可以讨论.     下 ...

  3. Swift 初见

    http://numbbbbb.gitbooks.io/-the-swift-programming-language-/chapter1/02_a_swift_tour.html 本页内容包括: 简 ...

  4. 09-UIKit(UICollectionViewController、UITabBarController)

    目录: 一.UICollectionViewController 二.UITabBarController(标签控制器) 三.视图和试图控制器的生命周期 四.其他控件 回到顶部 一.UICollect ...

  5. H5前端面试题及答案(2)

    最近想着跳槽,但面试的邀约不多,内心有点烦躁.梳理梳理心情,跳槽季竞争也大,努力做好自己... 21.请设计一套方案,用于确保页面中js加载完全. <!doctype html> < ...

  6. Qt线程QThread简析(8个线程等级,在UI线程里可调用thread->wait()等待线程结束,exit()可直接退出线程,setStackSize设置线程堆栈,首次见到Qt::HANDLE,QThreadData和QThreadPrivate)

    QThread实例代表一个线程,我们可以重新实现QThread::run(),要新建一个线程,我们应该先继承QThread并重新实现run()函数. 需要注意的是: 1.必须在创建QThread对象之 ...

  7. Python调用C库

    Python调用C库 Python可以利用ctypes库很方便地调用C的库函数. C库例程: # file: a.c int sum(int a, int b){   int t = 0;   int ...

  8. 9天快速入门java

    Java入门教程[9天快速入门JAVA] §1.3.简单的Java程序 下面我们先介绍两个简单的Java程序,并对其进行分析. 例1.1. public class HelloWorldApp{//a ...

  9. opencv实现连通域

    在本文中使用图像连通域统计使用opencv中的cvFloodFill方法,可是在cvFloodFill方法中CvConnectedComp參数无法返回详细点坐标位置信息,找了些资料.给CvSeq分配空 ...

  10. cloudflare的新waf,用Lua实现的

    我们使用nginx贯穿了我们的网络,做前线web服务,代理,流量过滤.在某些情况下,我们已经扩充了nginx上我们自己的模块的核心C代码,但近期我们做了一个重大举措,与nginx结合使用lua 差点儿 ...