Javascript получить текущий путь к файлу

Ответ 1

Вы можете полагаться на то, что каждый элемент <script> должен быть оценен *, прежде чем следующий будет вставлен в DOM.

Это означает, что оцениваемый script (пока он является частью вашей разметки, а не динамически вставлен) будет последним в NodeList, полученном с помощью getElementsByTagName( 'script' ).

Это позволяет вам прочитать атрибут src элементов и от него определить папку, из которой будет выполняться script - например:

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/"]
*/

* из блога Джона Реджига, связанного с выше

Это означает, что когда script, наконец, выполнит, что это будет последний script в DOM - и даже последний элемент в DOM ( остальная часть DOM построена постепенно, поскольку она попадает в теги script или до конца документа).

Update

Как указывает pimvdb - это будет работать при оценке script. Вам нужно будет каким-то образом сохранить путь, если вы собираетесь использовать его позже. Вы не можете запросить DOM в более поздней точке. Если вы используете один и тот же фрагмент для каждого script, значение scriptFolder будет перезаписано для каждого script. Вы должны дать каждой script уникальную переменную, возможно?

Обертка вашего script в своей области закрывается над значением scriptFolder, делая его доступным для остальной части script, не опасаясь быть перезаписанным

(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);
        });
    });


})();

Ответ 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 с тем же именем нет двух файлов script. Если у вас есть два сценария с тем же именем, которые находятся в другой папке, результат будет ненадежным.

Примечание

Если вы динамически добавляете скрипты на свою страницу, вам нужно убедиться, что ваш код выполняется после того, как последний script был добавлен в DOM.

В следующем примере показано, как это сделать с помощью одного динамически загруженного script. Он выводит массив JSON с ссылкой src для скриптов, загружающих внешний js файл и строку с кодировкой base64 содержимого JS для встроенных скриптов:

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>';
});

Ответ 3

Это почти невозможно для различных соображений безопасности и здравого смысла, но вот как вы можете это сделать с Ajax:)

var scriptElements = document.getElementsByTagName('script');
var i, element;

for(i = 0; element = scriptElements[i]; i++) {
    if(element.src) {
        var rq = new XMLHttpRequest(); // Needs IE6 compatibility, by the way.
        rq.open('GET', element.src, false);
        rq.send(null);

        if(~rq.responseText.indexOf('something that will only be found in this file')) {
            // Yay, found the filename!
            alert(element.src);
            break;
        }
    }
}

Посмотрите, почему это может не хотеть? Пожалуйста, не делайте этого, если у вас нет веских оснований для этого.

Ответ 4

Я не думаю, что jQuery предоставляет такую ​​функциональность. В любом случае вы можете получить текущий путь script (как полностью http, так и относительный), прочитав здесь ответ: Что такое script src URL?

Ответ 5

Не можете ли вы задать переменную пути в js? Таким образом, вы сохраняете путь файла в самом файле. Например:

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

// ...

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