如何使用jQuery
在javascript中获取当前脚本的路径例如我有site.com/js/script.js
并且此脚本中有一个代码:
$(document).ready(function() {
alert( ... this code ... );
}
它应该返回带有“/js/script.js”消息的警告框。这个函数应该像php中的magic __FILE__
常量一样工作
那么,为什么我需要这个?
我想动态设置背景图片:
$("somediv").css("background-image", "url(" + $SCRIPT_PATH + "/images/img.png)");
和images目录是/js
目录,靠近script.js
文件
和js
文件夹的名称可以动态设置,因此脚本和图像可以在/myprogect/javascript-files
目录中
答案 0 :(得分:25)
你can rely on the fact that each <script>
element has to be evaluated *之前将下一个插入到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);
});
});
})();
答案 1 :(得分:9)
将以下代码添加到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后执行代码。
以下示例显示了如何使用一个动态加载的脚本执行此操作。它输出一个带有src
链接的JSON数组,用于加载外部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>';
});
另见this Fiddle。
答案 2 :(得分:1)
由于各种安全性和常识性原因,这几乎是不可能的,但是这里是如何使用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;
}
}
}
看看为什么人们可能不想这样做?除非你有充分的理由这样做,否则请不要这样做。
答案 3 :(得分:1)
我认为jQuery不提供这样的功能。 无论如何,你可以通过阅读答案获得currentc脚本路径路径(完全是http和相对):What is my script src URL?
答案 4 :(得分:0)
你不能在js中设置一种路径变量吗?因此,您将文件的路径保存在文件本身中。 例如:
$(function() {
var FilePath = "js/some/path";
setMyDynamicImageUsingPath(FilePath);
});
// ...
function setMyDynamicImageUsingPath(path) {
$("somediv").css("background-image", "url(" + path + "/images/img.png)");
}