按下后退浏览器按钮时隐藏 jsp 页面上的 div

Question

Well I have a "jsp1" which contains a div with a button. Once the div button is pressed, it takes me to the next "jsp2". However, if the "back" browser button is clicked, I need the div button on "jsp1" to be hidden and prevent the user from click it, and if possible show other div that is already hidden. How can I achieve this using no frameworks.

piece "jsp1":

<c:choose>
<c:when test = "${submissionButtonSwitch == 1}">
<div> <!-- div i want to show after -->
<h2>This bill has already been submitted, go back to carry out a new purchase</h2>
</div>
</c:when>
<c:otherwise>
<div class="buttonWrapper"> <!-- div I want to hide after -->
<input class="button" type = "submit" value = "SUBMIT">
</div>
</c:otherwise>
</c:choose>

As you can see, I tried to get the result that I want through JSTL server side operations, but after a while I think this has more to do with JavaScript, than any other thing. I would be really glad to any suggestion, Im kind of beginner with this.

Answer 1

Just add load event to check navigation status performance.getEntriesByType("navigation")[0].type === "back_forward" if browser back clicked then show/hide components:

window.addEventListener('load', function(){
    if(performance.getEntriesByType("navigation")[0].type === "back_forward"){
        // show hide components
    }
}