javascript获取当前文件脚本路径

Posted

技术标签:

【中文标题】javascript获取当前文件脚本路径【英文标题】:javascript get current filescript path 【发布时间】:2012-01-21 07:58:48 【问题描述】:

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

例如我有site.com/js/script.js,这个脚本中有一段代码:

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

它应该返回带有“/js/script.js”消息的警报框。这个函数应该像 php 中的 __FILE__ 常量一样工作

那么,我为什么需要这个?

我想动态设置背景图片:

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

images目录是/js目录,靠近script.js文件

并且js文件夹名称可以动态设置,所以脚本和图片可以在/myprogect/javascript-files目录下

【问题讨论】:

如何通过 PHP 解析器传递您的 javascript 代码文件(通常使用“.php”文件)并执行alert('<?= __FILE__ ?>'); 之类的操作? (我知道通过这种方法,您需要避免在文件中出现杂散的<? ... ?> 和东西) 只要使用像$("somediv").css("background-image", "url(./images/img.png)");这样的相对路径。 我无法在 .js 文件中运行 php 代码,也不想更改服务器配置(因为它也将在用户服务器上运行) 我已经尝试过相对路径“./”以及“../”、“./../”(用于测试)。但它不起作用。似乎浏览器会自动将此路径覆盖为“site.com/images/img.png” 动态设置文件夹的代码应该设置一个可从您的 javascript 代码访问的选项(例如在全局变量中) 【参考方案1】:

你 can rely on the fact that each <script> element has to be evaluated* 在下一个插入 DOM 之前。

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

这允许您读取元素的 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。如果您对每个脚本使用相同的 sn-p,则每个脚本的 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);
        );
    );


)();

【讨论】:

只有在直接评估时才会给出正确的结果,这是否正确?我认为只有最后一个脚本元素才是执行文件之一。 是的,我已经考虑过这种方法。但是……想象一下,如果另一个程序员将​​在文档的头部添加另一个脚本(这可能是使用我们脚本的某些功能,或者他不知道他不应该添加额外的脚本)。在这种情况下,它会让另一个程序员的生活感到困扰( 你不能依赖从脚本标签加载的脚本。【参考方案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 数组,其中包含用于加载外部 js 文件的脚本的 src 链接和用于内联脚本的 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>';
);

另见this Fiddle

【讨论】:

如果脚本是动态加载的,这是没用的。 @catbadger :动态加载的脚本仍然添加到 DOM 中,因此这也应该适用于动态加载的脚本。只需确保在加载动态加载的脚本后执行该函数。请参阅我刚刚添加的演示代码,了解如何使用动态加载的脚本执行此操作。【参考方案3】:

我不认为 jQuery 提供这样的功能。 无论如何,您可以通过阅读此处的答案来获取 currentc 脚本路径路径(完全 http 和相对路径):What is my script src URL?

【讨论】:

【参考方案4】:

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

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

// ...

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

【讨论】:

不幸的是我不能。路径名称是动态的,所以我不能每次都更改固定变量值

以上是关于javascript获取当前文件脚本路径的主要内容,如果未能解决你的问题,请参考以下文章

Python获取当前脚本文件夹(Script)的绝对路径

如何获取当前javascript文件名的绝对路径

JavaScript获取当前url根目录(路径)

javascript 获取当前页面的URL

java 获取当前文件的路径,路径全名

java怎样获取当前目录路径