JSでパラメータをページ内リンク全てに引き継ぐ
2分
クロサイくん
目次
弊社、LP が合計で数百あり、それら全てに処理を施す系の仕事が来るとだいぶ死ぬ。僕が入社するちょっと前なんかはサーバーサイド言語すら使っておらず、HTML/CSS/JS でやってたものだから全 LP に数行の修正するだけでも 1 ヶ月弱かかってたなんて話を先輩から聞いたことがある。今では全ての LP に修正という案件が降ってきても一つのファイルをいじれば済むこともある程度には改修できた。最近来た全ての LP 修正系案件も共通のファイルにスクリプトを追加するだけで、head タグ内で読み込んで修正が完了した。めでたし。
要件は現在の URL のパラメータをページ内全てのリンクに引き継ぐというものだった。実際に使用しているものはやや違うが、一応置いておく。まだ未完であるが、想定し得る一通りのパターンとうちの仕様には対応できた。
コード
<script>
{
window.addEventListener("DOMContentLoaded", function () {
const params = new URL(location).search;
if (!params.length) return; // パラメータなければ終了
console.log("Parameters are ...", params);
const allLinks = document.querySelectorAll("a");
// ループで各リンクに処理
for (const link of allLinks) {
const href = link.getAttribute("href");
if (!href) continue; // javascript:void(0)弾く
// リンク先URLが電話やメールなどの場合は弾く
if (href.includes("mailto:") || href.includes("tel:") || !href.length) continue;
// 取得した全リンクのhrefの中身によって処理内容変える
if (href.includes("#") && !href.includes("?")) {
// リンク先URLにハッシュのみを含む場合
const index = href.indexOf("#");
const front = href.slice(0, index);
const back = href.slice(index);
const newLink = front + params + back;
link.setAttribute("href", newLink);
} else if (!href.includes("#") && href.includes("?")) {
// リンク先URLにパラメータのみ含む場合
console.log("パラメータのみ => " + href); // いい感じの処理にする
} else if (!href.includes("?") && !href.includes("#")) {
// リンク先URLにパラメータもハッシュも含まない場合
const newLink = href + params;
link.setAttribute("href", newLink);
} else if (href.includes("?") && href.includes("#")) {
// リンク先URLにすでにパラメータがあり、ハッシュも含む場合
console.log("ハッシュもパラメータもあり => " + href); // いい感じの処理にする
} else {
// 例外
console.error("現在のURLが予期されない、またはリンクのhrefの値が不明です => " + href);
}
}
});
}
</script>ほんといろいろな箇所を wrap するの大切
SNSでコメントする
