javascriptの条件分岐のelse ifがリロードしないと効かない

前提・実現したいこと

現在、javascriptでURLを取得してページごとで違うイベントを発火させようと試みているのですが、２つ目の条件分岐の"else if"のalert が一度ページをリロードをしないと出てきません。
どのような記述をすればページを表示しただけでalertが出るようになるのかの教えて頂きたいです。
よろしくお願い致します。

window.onpageshow = function() {
  var path = location.href;

  if(path.indexOf("confirm") >= 0){
    history.pushState(null, null, null);
    window.addEventListener('popstate', function(event) {
      history.pushState(null, null, null);
      location.reload();
    });
  } else if (path.indexOf("new") >= 0){
    window.alert("ok")
  }
}

補足

発火出来るようになったら「URLに"new"が入っていたら一度リロードする」というようにしたいと思っています。
↓このページです
http://localhost:3000/player/new/vocal
このページのHTML

<div class="wrapper-new">
  <%=render "header"%>
  <div class="main-new">
    <div class="box-form">
      <div class="new-titles">
        <h2>フォーム入力【ボーカル】</h2>
        <div class="progress">
          <div class="progress-bar1">
            <h5>カテゴリー選択</h5>
            <div class="progress-bar-circle1"><i class="fas fa-check"></i></div>
            <p>フォーム入力</p>
            <div class="progress-bar-circle2"></div>
          </div>
          <div class="progress-bar2">
            <p>掲載完了</p>
            <div class="progress-bar-circle3">
          </div>
        </div>
      </div>
      <%=form_with(scope: :vocal, model: @vocal, url: player_new_vocal_path, local: true) do |f| %>
        <% if @vocal.errors.any? %>
          <div class = "alert alert-warning">
            <ul>
              <% @vocal.errors.full_messages.each do |message| %>
                <li><i class="fas fa-exclamation-circle"></i><p><%= message %></p></li>
              <% end %>
            </ul>
          </div>
        <% end %>
        <div class="form-name" ontouchstart="">
          <h3>名前 / ペンネーム<span>必須</span></h3>
          <%= f.text_field :name, placeholder: "例： taro takuroku", class: "name-field" %>
        </div>
        <div class="form-style">
          <h3>演奏スタイル/ジャンル<span>必須</span></h3>
          <%= f.text_area :style, placeholder: "例：Rock、R&B、Irish", class: "style-area" %>
        </div>
        <div class="form-daw">
          <h3>DAW<span>必須</span></h3>
          <%= f.text_area :daw, placeholder: "例：Logic Pro X、Pro Tools", class: "daw-area" %>
        </div>
        <div class="form-gender">
          <h3>性別<span>必須</span></h3>
          <%= f.select :gender, [ ["男性"], ["女性"], ["その他"]], prompt: "--" %>
        </div>
        <div class="form-keyrange">
          <h3>キーレンジ<span>任意</span></h3>
          <%= f.text_area :keyrange, placeholder: "例：地声:A3〜D5 裏声:C5〜E5", class: "keyrange-area" %>
        </div>
        <div class="form-equipment">
          <h3>録音機材<span>必須</span></h3>
          <%= f.text_area :equipment, placeholder: "例：【マイク】NEUMANN U87Ai、【I/O】FireFaceUCX、【マイクプリ】NEVE 1073", class: "equipment-area" %>
        </div>
        <div class="form-sns">
          <h3>SNSアカウント<span>どちらか必須</span></h3>
          <%= f.text_field :sns, placeholder: "例：https://twitter.com/Remote__Rec",   class: "sns-field" %>
        </div>
        <div class="form-contact">
          <h3>連絡先<span>どちらか必須</span></h3>
          <%= f.text_field :contact, placeholder: "例：xxxxx@gmail.com",   class: "contact-field" %>
        </div>
        <div class="form-language">
          <h3>言語<span>必須</span></h3>
          <%= f.text_field :language, placeholder: "例：日本語、英語(UK)", class: "language-field" %>
        </div>
        <div class="form-sample">
          <h3>サンプル<span>任意</span></h3>
          <%= f.text_field :sample, placeholder: "例：https://recording", class: "sample-field" %>
        </div>
        <div class="form-comment">
          <h3>コメント<span>必須</span></h3>
          <%= f.text_area :comment, placeholder: "例：納期:即日〜3日 ご依頼時にご相談ください。メジャーでの演奏経験あり！どんなジャンルでもお任せください。", class: "comment-area" %>
        </div>
        <div class="form-submit">
          <label>
            <%= f.submit "確認ページへ", class: "submit-btn"%>
            <i class="fas fa-arrow-circle-right"></i>
          </label>
        </div>
      <% end %>
    </div>
  </div>
</div>

yuuyu

2020/05/17 02:55

該当ページのurlを記載することは可能でしょうか？

yuuyu

2020/05/17 04:05

修正ありがとうございます。urlを見た感じだとelseif分岐に走る気はしますね。。ちなみにですが、var path = location.href;の直前もしくは直後にwindow.alertを設置した場合、このアラートはリロードせずに読み込まれますか？リロードしないと出ないですか？

miSaito

2020/05/17 04:09

どちらに設置してもリロードが必要でした。

yuuyu

2020/05/17 04:12

となると問題は他のところにある可能性が高いと思います。例えば上記コードがとある関数の中で呼ばれていたり、もしくは初回の読み込みの時点ではurlが異なっていたりするなど、原因となりそうなコードがないか一度確認してみてください。

miSaito

2020/05/17 04:26

jsの記述をしているところは上記の記述の部分だけなのでjsは大丈夫かなと思います。URLも変わりませんでした。(>_<)

yuuyu

2020/05/17 05:27

それでは、 window.onpageshow = function() { の上にalertした場合はどうなりますか？

YT0014

2020/05/17 12:41

jsの記載位置次第で、pageshowイベント終了後に定義される可能性はないですかね？そうなっていると仮定すると、振る舞いが納得できるのですが。念の為、HTML全部を記載してもらうほうが、良いかもしれません。

miSaito

2020/05/17 13:00

返信遅くなって申し訳ありません。 > window.onpageshow = function() { の上にalertした場合はどうなりますか？各ページを表示をするたびにalertが出ます。 newの含まれるページのHTMLの記述を追加しました

yuuyu

2020/05/17 13:07

＞各ページを表示をするたびにalertが出ます。ということはjavascript自体は読み込まれているようですし、YT0014さんの言っているイベント後に呼ばれている可能性もありそうですね。なので、sctiptタグがbodyの下の方にある場合は、一度上のheaderタグ内に上げてみてください。

miSaito

2020/05/18 04:43

scriptタグはbodyの下になかったです。なぜリロードしないといけないかわからないままですが、補足にある「URLに"new"が入っていたら一度リロードする」ということを達成できたのでとりあえず解決ということにしようと思います。親身になって答えていただいたのに申し訳ありません。(>_<) ありがとうございました。

YT0014

2020/05/18 05:27

HTMLソースの追加ありがとうございました。ただ、このソースでも、scriptタグの記載箇所が不明です。できましたら、ブラウザで、HTMLソースを取得して、ご提示いただけませんでしょうか。また、「各ページを表示をするたびにalertが出ます。」とのことですが、その際、ブラウザ本体の画面は何もない状態でしょうか？フォームなどが表示されているようなら、私の懸念が正しいことになりますので、scriptタグの位置の調整をされるべきだと思います。

YT0014

2020/05/18 23:48 編集

現在の状態の推測 1.サーバからのレスポンスがブラウザに届く 2.ブラウザがHTMLの解釈を始める 3.解釈が進み、画面の表示を始める　＝ pageshow 発生 4.scriptタグまで進み、onpageshow処理を定義 pageshowが終わっているので、onpageshow処理がなされないリロード時 1.サーバからのレスポンスがブラウザに届く 2.ブラウザがHTMLの解釈を始める 3.解釈が進み、画面の表示を始める　＝ pageshow 発生　リロード前の定義が生きているので、onpageshow処理が行われる 4.scriptタグまで進み、onpageshow処理を再定義