<script type="text/javascript" src="https://example.com/example.js?param=abc"><script>
上記のようにスクリプトを読み込む際、example.jsからパラメータを取得したい場合どうしたらよいでしょうか。
バックエンドでJSファイルを出力しているのであれば、バックエンドで変数に代入するよう出力すれば可能です。
しかしながら、フロントのJSだけで対応したい場合はどうでしょうか？
結論としては下記で対応できます。
url = new URL(document.querySelector('[src*="https://example.com/example.js"]').src)
let param = url.searchParams.get('param')https://example.com/example.js の部分と
param の部分は適宜変更してください。
各ブラウザの対応状況は
IEとOpera miniでは使えませんが、他はカバーされています。
ref:
https://caniuse.com/urlsearchparams
https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams
以下解説です。
まず、scriptで読み込まれる際にパラメータは取得できません。
そのため、
1. 自分を読み込んでいるURLを取得
2. そのURLのパラメータを取得
という手順を踏んでいます
1. 自分を読み込んでいるURLを取得
scriptタグにidをつけたりしてもいいのですが、もしidが衝突したりすると動作しなくなるのでつけずに済ませます。
自身を読み込んでいるということは、自身のURIである
https://example.com/example.js
を含んでいるはずです。
そのため、
document.querySelector('[src*="https://example.com/example.js"]')
というように、querySelectorでsrcを指定することで、自分の読み込みを指定しているスクリプトタグを取得できます。
※ホストを省略して読み込む場合は指定をsrc*="/example.js"に変更するなど適宜応用してください。
この際、srcの指定には?以降のパラメータは記述しないでください。
パラメータも記述してしまうと、指定通りのパラメータのときしか要素を取得できなくなるためです。
代わりに、src*とすることで、srcが完全一致しなくても（=パラメータを含んでいても）要素を取得できるようにしています。
必要なのは要素そのもの(DOM)ではなくそのsrcのURLなので、ここに.srcを末尾につけることで、読み込んでいるURLのフルパスを取得できます。
2. そのURLのパラメータを取得
1でURLのフルパスが取得できたので、あとはそこからパラメータを抜き出すだけです。
ここまでできていれば、自分で正規表現などを使って抜き出すことももちろん可能です。
しかし、IEなどのサポートがなくてよいのであれば正規表現などを使わずともURLSearchParamsを利用して簡単にパラメータを取得することができます。
まず、new URL(urlString) に1で取得するURLのフルパスを渡すことによりurlオブジェクトを作成します。
あとは、取得したいパラメータ名がparamであれば
url.searchParams.get('param')
とすることでparamの値が返ってきます。
modeの値が取得したければ
url.searchParams.get('mode')
です。