現在実行中のJavaScriptファイル(Webページ内)のURLを判別するための簡単で信頼できる方法はありますか?
これについての私の唯一の考えは、すべてのスクリプトsrc
属性についてDOMをスキャンして、現在のファイルがどのように参照されているかを見つけ、それを_document.location
_に適用して絶対URLを把握することです。誰か他のアイデアがありますが、私が完全に見落としていた非常に簡単な方法はありますか?
更新:DOMを介してアクセスされるスクリプト要素には、完全なURLを含むsrc
プロパティが既にあります。それがどれほどユビキタス/標準であるかはわかりませんが、代わりにgetAttribute("src")
を使用して、[X] HTMLにある生の属性値を返すことができます。
これを、それ自体のURLを知る必要があるjsファイルに入れます。
完全修飾(例:http://www.example.com/js/main.js
):
var scriptSource = (function(scripts) {
var scripts = document.getElementsByTagName('script'),
script = scripts[scripts.length - 1];
if (script.getAttribute.length !== undefined) {
return script.src
}
return script.getAttribute('src', -1)
}());
またはsourceに表示されるとおり(例:/js/main.js
):
var scriptSource = (function() {
var scripts = document.getElementsByTagName('script'),
script = scripts[scripts.length - 1];
if (script.getAttribute.length !== undefined) {
return script.getAttribute('src')
}
return script.getAttribute('src', 2)
}());
使用されているgetAttribute
パラメーターの説明については http://www.glennjones.net/Post/809/getAttributehrefbug.htm を参照してください(これはIE =バグ)。
最近のブラウザの場合、document.currentScriptを使用してこの情報を取得できます。
var mySource = document.currentScript.src;
利点は、非同期で読み込まれるスクリプトの方が信頼性が高いことです。欠点は、私が知っているように、普遍的にサポートされていないことです。 Chrome> = 29、FireFox> = 4、Opera> = 16.多くの便利なものと同様に、では機能しないようです。 IE。
スクリプトパスを取得する必要がある場合は、document.currentScriptが定義されているかどうかを確認し、定義されていない場合は、受け入れられた回答に記載されている方法を使用します。
if (document.currentScript) {
mySource = document.currentScript.src;
} else {
// code omitted for brevity
}
https://developer.mozilla.org/en-US/docs/Web/API/document.currentScript
ソースに表示されるとおり(例:/js/main.js
)、これはcross-browser:
var scriptSource = (function()
{
var scripts = document.getElementsByTagName('script'),
script = scripts[scripts.length - 1];
//No need to perform the same test we do for the Fully Qualified
return script.getAttribute('src', 2); //this works in all browser even in FF/Chrome/Safari
}());
完全修飾(例:http://www.example.com/js/main.js
):
いくつかのテストの後、クロスブラウザの方法で完全修飾のものを取得するのは難しいようです。 Crescent Freshによって提案されたソリューションIE7で機能する場合でも、完全修飾を取得するためにIE8では機能しません
この方法は、スクリプトのファイル名がわかっているので、遅延、非同期、遅延読み込みで機能します。
/* see
* http://stackoverflow.com/questions/984510/what-is-my-script-src-url/984656#984656
* http://www.glennjones.net/Post/809/getAttributehrefbug.htm
*
* iterate all script to find script with right filename
* this work with async and defer (but your script MUST have a unique filemane)
* mozilla support document.currentScript and we use it, if is set
*
* this will not work with local script loaded by jQuery.getScript(),
* since there is no script tag added into the dom. the script is only evaluated in global space.
* http://api.jquery.com/jQuery.getScript/
*
* to fix this odd, you can add a reference in meta ( meta[name=srcipt][content=url] )
* when you load the script
*/
var scriptFilename = 'jquery.plugins.template.js'; // don't forget to set the filename
var scriptUrl = (function() {
if (document.currentScript) { // support defer & async (mozilla only)
return document.currentScript.src;
} else {
var ls,s;
var getSrc = function (ls, attr) {
var i, l = ls.length, nf, s;
for (i = 0; i < l; i++) {
s = null;
if (ls[i].getAttribute.length !== undefined) {
s = ls[i].getAttribute(attr, 2);
}
if (!s) continue; // tag with no src
nf = s;
nf = nf.split('?')[0].split('/').pop(); // get script filename
if (nf === scriptFilename) {
return s;
}
}
};
ls = document.getElementsByTagName('script');
s = getSrc(ls, 'src');
if ( !s ) { // search reference of script loaded by jQuery.getScript() in meta[name=srcipt][content=url]
ls = document.getElementsByTagName('meta');
s = getSrc(ls, 'content');
}
if ( s ) return s;
}
return '';
})();
var scriptPath = scriptUrl.substring(0, scriptUrl.lastIndexOf('/'))+"/";
jqueryプラグインテンプレートとそれ: https://github.com/mkdgs/mkdgs-snippet/blob/master/javascript/jquery.plugins.template.js
注:domにスクリプトタグが追加されていないため、これはjQuery.getScript()によってロードされたローカルスクリプトでは機能しません。スクリプトはグローバル空間でのみ評価されます。 http://api.jquery.com/jQuery.getScript/
それを修正するには、次のようなことができます。
function loadScript(url,callback) {
if ( $('[src="'+url+'"]').length ) return true; // is already loaded
// make a reference of the loaded script
if ( $('meta[content="'+url+'"]', $("head")).length ) return true; // is already loaded
var meta = document.createElement('meta');
meta.content = url;
meta.name = 'script';
$("head").append(meta);
return $.ajax({
cache: true,
url: u,
dataType: 'script',
async: false,
success : function (script) {
try {
if ( typeof callback == 'function' ) callback();
} catch (error) {
//console.log(error);
}
}
});
}
これが厳密にクライアントソリューションである場合、あなたのソリューションはかなり良いと思います。
サーバーでコードを記述している場合は、div/hiddenフィールド/(ここにお気に入りのHTML要素を挿入)にスクリプトへの完全に解決されたURLを入力し、クライアント側のjavascriptでそれを取得することができます。
どの関数(したがってどのファイル)であるかを知りたい場合は、 https://addons.mozilla.org/en-US/firefox/addon/10345 を参照してください。制御できないページで実行します。
yourスクリプトのどれが実行されているかを知りたい場合は、いくつかの方法があります。 Firebugを使用すると、情報をconsole.log()
することができます。コードにアラートステートメントを入れるだけでも(煩わしい間)、ローテクな方法でデバッグするのに役立ちます。エラーを発生させてキャッチし、エラーのプロパティを使用して処理することもできます( https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Error を参照)
しかし、なぜこれが重要なのでしょうか?スクリプトがすでにエラーを引き起こしている場合は、エラーが発生している場所を簡単に特定できます。エラーがまったく問題ではない場合、どのファイルからのものかを知ることの利点は何ですか?