例えばブログサイトなどでブログの記事内に共通パーツで設置しているリンクがあったときに、どのカテゴリの記事なのかや、いつ表示されたか時間を確認したいとなった場合、パラメータを仕込むのも1つの手ですよね。
ということでhrefに設定してあるurlにパラメータを追加する方法を調べてみました。
hrefに設定してあるurlにパラメータを追加した結果
以下が完成したコードです。
See the Pen href add parameter by Nakamoto (@programmerlife) on CodePen.
調べるといろいろ書き方があるようですが、一番わかりやすいと思った方法でかいています。
詳しく書いていきます。
DOM操作でidからaタグを取得する
以下のコードでidがbtnのaタグを取得しています。
const btn = document.getElementById(‘btn’);
hrefがいるかで分岐
今回はhrefがあるかどうかで分岐していますが、例えばリンクに特定のパラメータがすでに追加されているかなど確認して条件分岐するのもいかもしれません。
if(btn.href) {
// コード
}
パラメータを追加する
画面上にある文字列をパラメータとして追加しています。
const cat = document.getElementById(‘cat’);
btn.href = btn.href + “?” + cat.innerHTML;
btn.href = btn.href + “?” + cat.innerHTML; でパラメータを追加しています。（パラメータは「?」で追加）
この後に画面にパラメータを戻す処理が必要だと思い込みかなりハマりましたが、リンクをホバーしてみるとブラウザ左下にパラメータ付きのリンクを確認することができすでに置き換わっていることに驚きました。
おまけ すでにパラメータが設定されている場合
すでにパラメーターがある場合にパラメータを追加する時は「&」でパラメータを追加する必要があります。
See the Pen href add parameter(already set param) by Nakamoto (@programmerlife) on CodePen.
条件分岐で「?」が使われているかでパラメータの有無を調べています。特定のパラメータであればパラメータ名で分岐させた方が安全かもしれません。
if(btn.href.indexOf(“?”)==-1) {
// パラメーターがない場合「?」で追加
}else{
// パラメーターがある場合「&」で追加
}
btn.href.indexOf(“?”)はない場合「-1」が戻り値のため「btn.href.indexOf(“?”)==-1」という条件にしています。
おわり
画面のカテゴリはパンくずリストなんかをイメージして書きました。日本語の場合はswitch文などで英字に置き換えて実施すればいいかなと思っています。
そうするとどのカテゴリの記事からのリンクかがわかってアナリティクスなどで調べやすくなるのではと思っています。
思っていた以上に簡単だったので、そんなわけはないと遠回りすることになり調べるのに時間がかかってしまいました。
参考元
Add parameters on href url with javascript and with specific conditions
