JS は現在のスクリプト ファイルの絶対パスを取得します_JavaScript ヒント

モジュール ローダーを作成するとき、現在のスクリプト ファイルの絶対パスをベース パスとして取得することは不可欠な手順です。この問題について一緒に議論しましょう。

1. 主要ブラウザの実装方法

[a] Chrome と FF

。

超簡単な文章で十分です！

var getCurrAbsPath = function(){
 return document.currentScript.src;
};

ここではオブジェクト document.currentScript が使用されており、現在実行されているスクリプト要素を返します。スクリプト ファイルの絶対パスは、スクリプト要素の src 属性を呼び出すことで取得できます。

[b]、IE10、Safari、Opera9

。

Error オブジェクトの stack 属性 (IE10)、sourceURL 属性 (Safari)、stacktrace 属性 (Opera9) を使用して絶対パスを抽出します

var getCurrAbsPath = function(){
  var a = {}, stack;
  try{
   a.b();
  }
  catch(e){
   stack = e.stack || e.sourceURL || e.stacktrace; 
  }
  var rExtractUri = /(?:http|https|file):\/\/.*?\/.+?.js/, 
    absPath = rExtractUri.exec(stack);
  return absPath[0] || '';
}; 

[C] IE5.5~9

。

ドキュメント内のスクリプトタグをたどります

var getCurrAbsPath = function(){
  var scripts = document.scripts;
  var isLt8 = ('' + document.querySelector).indexOf('[native code]') === -1;
  for (var i = scripts.length - 1, script; script = scripts[i--];){
    if (script.readyState === 'interative'){
     return isLt8 ? script.getAttribute('src', 4) : script.src;  
    }
  }
};

2.関連知識の紹介

IE5.5~9のスクリプトのreadyStateはスクリプト要素のステータスを示し、次のステータス値を持ちます:

未初期化: 初期化されていません

読み込み中: 読み込み中

loaded: 読み込みが完了しました

対話型: 実行中

complete: 実行が完了しました

onreadystatechange イベントをサブスクライブすることで、スクリプト要素の状態の変化をリッスンできます。ただし、残念なことに、ロードされた状態と完了した状態は不確実な順序で表示され、そのうちの 1 つだけが表示される場合があります。そのため、スクリプト要素を動的に追加する場合は、最初に src 属性を設定してからスクリプト要素を DOM ツリーに追加することをお勧めします。 , そのため、ロードされた状態と完了した状態のうちの 1 つだけが表示されます (ただし、要求されるたびにどの状態が表示されるかは異なります)。これにより、監視が容易になります。

3. IE および FF での別の方法 window.onerror イベントをサブスクライブすることにより、イベント処理関数は 3 つのパラメーター、つまり msg、url、および num を受け入れます。ここの URL は、現在のスクリプトの絶対パスです。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。