質問: ### fetchでhtmlの一部分を差し替えるも、リロードすると差し替え部分が消える。 私は脱出アドベンチャーアドベンチャーの公式サイトのようにナビゲーション部分を押すと、htmlの一部分だけが変わるという実装をしたいと思いました。 そこで私は「ナビゲーション部分にイベントハンドラを設置し、ボタンを押したら、fetchを使ってhtmlの一部分を差し替える」という方法でこれを実現しました。 しかし猿の浅知恵、これには問題がありました。 タイトル通り「リロードすると差し替え部分が消える。」のです。 これを解決するにはどうすればよいのでしょう? 元々のindex.htmlのコピーを作り、一部分だけ変え、アンカーで飛ぶというのならすでにできているのですが、エレガントでないなと思います。 一応、URLのパラメータでindex.html#~とやり、~で識別することもやってみましたが、同じindex.htmlにアンカーをはる場合、javascrpitは二度読み込まれないようで、実装できませんでした。 やはり元々のindex.htmlのコピーを作り、一部分だけ変え、アンカーで飛ぶしかないのでしょうか? 言葉だけの説明でわかりくいかと思いますが、どうかおすすめの方針などあれば、アドバイスいただけたらありがたいです・・・
回答: そちらのサイト見ましたが、そのサイトは全体が更新されてますよ。 やるとすれば、DOMの更新時に、pushStateして、見た目上のURLの書き換えをします。 もちろん、書き換えたURLの実体も存在しなければならない点に注意してください。 さらに高度にやるとなると、各ページのURLにサーバー側でfallbackを設定し、クライアント側でルーティングする必要があります。(流行りのReactやらVueやらを使うと良いかもしれません。)