未分類

【JS】scriptタグで読み込み時、URLのGETパラメータを取得する

<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')
です。


-未分類

Copyright© F27P , 2021 All Rights Reserved Powered by AFFINGER5.