javascript获取当前的文件脚本路径

Question

如何使用jQuery在javascript中获取当前脚本的路径

例如,我有,site.com/js/script.js并在此脚本中有一个代码:

$(document).ready(function() {
   alert(  ... this code ... );
}

它应该返回带有"/js/script.js"消息的警告框.这个函数应该像__FILE__php中的魔术常量一样工作

那么,为什么我需要这个呢？

我想动态设置背景图片:

$("somediv").css("background-image", "url(" + $SCRIPT_PATH + "/images/img.png)");

和images目录是文件/js附近的script.js目录

和js文件夹的名称可以动态设置,因此脚本和图像可以在/myprogect/javascript-files目录中

Answer 1

您可以依赖于<script>在将下一个元素插入DOM之前必须评估每个元素的事实.

这意味着当前评估的脚本(只要它是标记的一部分而不是动态插入)将是NodeList检索到的最后一个脚本getElementsByTagName( 'script' ).

这允许您读取元素src属性,并从中确定脚本所在的文件夹 - 如下所示:

var scriptEls = document.getElementsByTagName( 'script' );
var thisScriptEl = scriptEls[scriptEls.length - 1];
var scriptPath = thisScriptEl.src;
var scriptFolder = scriptPath.substr(0, scriptPath.lastIndexOf( '/' )+1 );

console.log( [scriptPath, scriptFolder] );

我尝试使用从不同文件夹加载的3个脚本来获取此输出

/*
["http://127.0.0.1:8000/dfhdfh/folder1/script1.js", "http://127.0.0.1:8000/dfhdfh/folder1/"]
["http://127.0.0.1:8000/dfhdfh/folder2/script2.js", "http://127.0.0.1:8000/dfhdfh/folder2/"]
["http://127.0.0.1:8000/dfhdfh/folder3/script3.js", "http://127.0.0.1:8000/dfhdfh/folder3/"]
*/

*来自John Resigs博客链接到上面

这意味着当脚本最终执行时它将是DOM中的最后一个脚本 - 甚至是DOM中的最后一个元素(DOM的其余部分是逐步构建的,因为它会触及更多脚本标记,或者直到结束文献).

更新

正如pimvdb指出的那样 - 这将在评估脚本时起作用.如果您以后要使用它,您将需要以某种方式存储路径.您不能在以后查询DOM.如果对每个脚本使用相同的代码段,scriptFolder则将为每个脚本覆盖该值.你应该给每个脚本一个唯一的变量吗？

将脚本包装在自己的范围内scriptFolder会使脚本的其余部分可用,而不必担心被覆盖

(function() {

    var scriptEls = document.getElementsByTagName( 'script' );
    var thisScriptEl = scriptEls[scriptEls.length - 1];
    var scriptPath = thisScriptEl.src;
    var scriptFolder = scriptPath.substr(0, scriptPath.lastIndexOf( '/' )+1 );


    $( function(){
        $('#my-div').click(function(e){
            alert(scriptFolder);
        });
    });


})();

Answer 2

将以下代码添加到JS:

var retrieveURL = function(filename) {
    var scripts = document.getElementsByTagName('script');
    if (scripts && scripts.length > 0) {
        for (var i in scripts) {
            if (scripts[i].src && scripts[i].src.match(new RegExp(filename+'\\.js$'))) {
                return scripts[i].src.replace(new RegExp('(.*)'+filename+'\\.js$'), '$1');
            }
        }
    }
};

假设这些是HTML中调用的脚本:

<script src="assets/js/awesome.js"></script>
<script src="assets/js/oldcode/fancy-stuff.js"></script>
<script src="assets/js/jquery/cool-plugin.js"></script>

然后,您可以使用这样的功能

var awesomeURL = retrieveURL('awesome');
// result : 'assets/js/'

var awesomeURL = retrieveURL('fancy-stuff');
// result : 'assets/js/oldcode/'

var awesomeURL = retrieveURL('cool-plugin');
// result : 'assets/js/jquery/'

请注意,这仅适用于HTML中没有两个具有相同名称的脚本文件.如果您有两个名称相同的脚本位于不同的文件夹中,则结果将不可靠.

注意

如果动态地向页面添加脚本,则需要确保在将最后一个脚本添加到DOM后执行代码.

以下示例显示了如何使用一个动态加载的脚本执行此操作.它输出一个JSON数组,其中包含src用于加载外部js文件的脚本链接以及用于内联脚本的JS内容的base64编码字符串:

var addScript = function(src, callback) {
    var s = document.createElement( 'script' );
    s.setAttribute( 'src', src );
    document.body.appendChild( s );
    s.onload = callback;
}

var retrieveURL = function(filename) {
    var scripts = document.getElementsByTagName('script');
    if (scripts && scripts.length > 0) {
        for (var i in scripts) {
            if (scripts[i].src && scripts[i].src.match(new RegExp(filename+'\\.js$'))) {
                return scripts[i].src.replace(new RegExp('(.*)'+filename+'\\.js$'), '$1');
            }
        }
    }
};

addScript('https://code.jquery.com/jquery-1.12.4.min.js', function() {
    var scripts = document.getElementsByTagName('script');
    var sources = [];
    for (var i = 0; i < scripts.length; i++) {
        if(scripts[i].src == '') {
            sources.push(btoa(scripts[i].innerHTML));
        } else {
            sources.push(scripts[i].src);
        }
    }
    document.body.innerHTML += '<pre>' + JSON.stringify(sources,null,2) + '</pre>';
});

另见这个小提琴.

Answer 3

js中不能设置一种路径变量吗？因此，您将文件的路径保存在文件本身中。例如：

$(function() {
  var FilePath = "js/some/path";
  setMyDynamicImageUsingPath(FilePath);
});

// ...

function setMyDynamicImageUsingPath(path) {
  $("somediv").css("background-image", "url(" + path + "/images/img.png)");
}