JavaScriptで実行中のスクリプトを読み込んだscriptタグを参照する方法
JavaScriptで実行中のスクリプトを読み込んだscriptタグを参照する方法
document.currentScript
document.currentScriptは、現在実行中のスクリプト要素への参照を取得します。これは最もシンプルで直接的な方法ですが、IE 11 以前ではサポートされていません。
const scriptElement = document.currentScript;
// スクリプト要素のプロパティや属性にアクセス
console.log(scriptElement.src); // スクリプトのURL
console.log(scriptElement.type); // スクリプトのMIMEタイプ
// スクリプト要素の子要素にアクセス
const scriptText = scriptElement.textContent; // スクリプトの内容
parentNodeプロパティは、要素の親要素への参照を取得します。document.currentScriptが使用できない場合は、このプロパティを使用して、script要素の親要素をたどることで、script要素を取得できます。
const scriptElement = document.querySelector('script');
let parent = scriptElement.parentNode;
// 親要素が`script`タグになるまでループ
while (parent && parent.tagName !== 'SCRIPT') {
parent = parent.parentNode;
}
// スクリプト要素のプロパティや属性にアクセス
console.log(parent.src); // スクリプトのURL
console.log(parent.type); // スクリプトのMIMEタイプ
// スクリプト要素の子要素にアクセス
const scriptText = parent.textContent; // スクリプトの内容
closest()メソッドは、指定されたセレクターに一致する最も近い祖先要素への参照を取得します。document.currentScriptが使用できない場合は、このメソッドを使用して、script要素を取得できます。
const scriptElement = document.querySelector('script');
// 最初の親要素が`script`タグを取得
const parentScript = scriptElement.closest('script');
// スクリプト要素のプロパティや属性にアクセス
console.log(parentScript.src); // スクリプトのURL
console.log(parentScript.type); // スクリプトのMIMEタイプ
// スクリプト要素の子要素にアクセス
const scriptText = parentScript.textContent; // スクリプトの内容
エージェント固有の拡張機能
ブラウザによっては、document.currentScriptに似た機能を提供するエージェント固有の拡張機能があります。
- Firefox:
document.activeElement - Chrome:
window.__SCRIPT_ELEMENT__
これらの拡張機能はブラウザ固有のものであるため、他のブラウザでは使用できないことに注意してください。
上記の方法の中で、最も汎用性の高い方法はdocument.currentScriptです。ただし、IE 11 以前ではサポートされていないため、古いブラウザをサポートする必要がある場合は、他の方法を使用する必要があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
</head>
<body>
<h1>実行中のスクリプトを読み込んだscriptタグを参照</h1>
<p>このサンプルコードは、`document.currentScript`、`parentNode`、`closest()`を使用して、実行中のスクリプトを読み込んだ`script`タグを参照する方法を示しています。</p>
<script>
// document.currentScript
const scriptElement1 = document.currentScript;
console.log('document.currentScript:', scriptElement1);
// parentNode
const scriptElement2 = document.querySelector('script');
let parent = scriptElement2.parentNode;
while (parent && parent.tagName !== 'SCRIPT') {
parent = parent.parentNode;
}
console.log('parentNode:', parent);
// closest()
const scriptElement3 = document.querySelector('script');
const parentScript3 = scriptElement3.closest('script');
console.log('closest():', parentScript3);
</script>
</body>
</html>
このコードを実行すると、コンソールに以下の出力が表示されます。
document.currentScript: <script>...</script>
parentNode: <script>...</script>
closest(): <script>...</script>
上記のように、document.currentScript、parentNode、closest()のいずれを使用しても、実行中のスクリプトを読み込んだscriptタグを取得できます。
document.scriptsは、ドキュメント内のすべてのscript要素の配列を取得します。この配列をループ処理することで、実行中のスクリプトのscript要素を見つけることができます。
const scripts = document.scripts;
for (const script of scripts) {
if (script.src === 'path/to/script.js') {
// スクリプト要素を取得
console.log(script);
}
}
スクリプトのURL
script要素のsrc属性には、スクリプトのURLが指定されています。このURLを使用して、実行中のスクリプトのscript要素を見つけることができます。
const scriptUrl = 'path/to/script.js';
const scriptElement = document.querySelector(`script[src="${scriptUrl}"]`);
// スクリプト要素のプロパティや属性にアクセス
console.log(scriptElement.src); // スクリプトのURL
console.log(scriptElement.type); // スクリプトのMIMEタイプ
// スクリプト要素の子要素にアクセス
const scriptText = scriptElement.textContent; // スクリプトの内容
javascript element parent
