header ads

非同期でページ遷移→遷移先のページでブラウザの戻るボタン→JavaScriptが効かない！

4月 11, 2024

Thymeleafを使用したアプリケーション開発を勉強中です。

1.html↓

HTML

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4 <meta charset="UTF-8"> 5 <title>1</title> 6</head> 7 8<body> 9 <header>ヘッダー</header> 10 11 <div class="main"> 12 <div class="aaa"> 13 <h1>1ページ</h1> 14 <button id="testButton">ボタン</button> 15 </div> 16 </div> 17 18 <footer>フッター</footer> 19 20 <script> 21 document.getElementById("testButton").addEventListener("click", (event) => { 22 console.log("testButtonが押されたよ"); 23 }); 24 </script> 25</body> 26</html>

2.html↓

HTML

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4 <meta charset="UTF-8"> 5 <title>2</title> 6</head> 7 8<body> 9 <header>ヘッダー</header> 10 11 <div class="main"> 12 <div class="aaa"> 13 <h1>2ページ</h1> 14 </div> 15 </div> 16 17 <footer>フッター</footer> 18</body> 19</html>

1.htmlから非同期で2.htmlに画面遷移させます。
今回、画面遷移のきっかけの<a>や非同期に関するJSコードは省いてあるものとします。

の中身を画面遷移によって書き換え、2.htmlとなり、 その後、ブラウザの戻るボタンをクリックし、1.htmlに戻ります。 そこで、ボタンをクリックしても コンソールには何も表示されません。 画面遷移→遷移先のページ(2.html)でブラウザの戻るボタン→ 1.htmlにて、ボタンをクリックすると、コンソールに 「testButtonが押されたよ」と表示させる。 この実現方法をどうか教えていただきたいです。
hsmw

hsmw

コメントを投稿

0 コメント