aタグをクリック後、ページ遷移してイベントを実行したい

Question

aタグクリック後に、遷移先のページでJSを実行したいと思っています。

参考サイトのリンク
上記の記事がまさにやりたいことで、参考にさせていただき以下のコードを試してみましたが、
ページ内では正常に動きましたが、遷移後はやはりJSが実行されません。

$(window).on('load',function(){
    $('.a').trigger('click');
});

$(".a").on('click',function(){
.....クリック後の処理（）
});

お力をお貸しいただきたいです。
どうぞよろしくお願いいたします。

Answer 1

遷移先のページでJSを実行したい

遷移先がgetのパラメータを判断して何かを動作するように
つくればできますが、基本的に飛び先の動作は元のページでコントロール
すべきではありません

Comments

[Yui_note]

アドバイスありがとうございます。初歩的な部分がわかっていないところがあり恐縮ですが、パラメータを取得して判断する方法以外に、「aタグに外部ページ内リンクのIDを振っておき、そのIDによって条件分岐をしてイベントを発火するのもアリ。」と参考サイトに記述がありまして、こういったことは実際可能なものなのでしょうか？
お手数ですが、よろしければ教えていただけますと幸いです。
よろしくお願いいたします。

[yambejp]

たとえばこんなかんじ（ちょっとはしょっています）

//mypage.html
<a href="next.html?id=0">0</a>
<a href="next.html?id=1">1</a>
<a href="next.html?id=2">2</a>

//next.html
<script>
window.addEventListener('DOMContentLoaded', ()=>{
var id;
try{
id=location.search.substring(1).split("&").map(x=>x.split("=")).filter(x=>x[0]=="id")[0][1];
}catch(e){
id=null
}
var messages=["おはよ","こんにちは","こんばんわ"];
document.querySelector('#view').textContent=messages[id]||"不明";
});
</script>
<div id="view"></div>

[Yui_note]

ありがとうございます。m
いただいたコードを参考に実装にトライしてみたいと思います。
取り急ぎお礼までになりますが、ありがとうございました。
実装できた際には、またこちらからご報告させていただきます。

Answer 2

いただいたアドバイスを元に、URLとページ遷移先のIDを比較して
実装したい事が実現できました。

var urlHash = location.hash;
 
// URLにアンカーが存在する場合
if(urlHash){
  // アンカーが#a1かどうかを判断する
  if (urlHash == '#a1') {
    $("#a-list01").addClass("active");
  } else {}
  if (urlHash == '#a2') {
    $("#a-list02").addClass("active");
  } else {}
  .....
}

ページを移動してのJSの実行は基本できない様でしたので、
URLのパラメータを取得して判断する方法で実装いたしました。

複数IDで同処理を複数記述してる状態でしたので、
もう少し勉強して整理して記述したいと思います。

ありがとうございました。

Comments

[yambejp]

ハッシュはページ内リンクの機能なので想定しない場所に
飛ばされないよう注意してください。
場合によってはクッキーとかのほうがスマートかもしれません
（実装は面倒ですが）

[Yui_note]

アドバイスいただきありがとうございます。
ハッシュのJSコードは共通JSファイルに記述しておりましたので、
どのページからアクセスがあってもうまく機能したんだと思います。（間違えていたらすみません。。）
せっかく教えていただいたコードもまだ読解できない状況でしたので、
もっと勉強に精進します。お手数をおかけいたしました、ありがとうございました。m