No Result
View All Result
Cloud Reports
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital
No Result
View All Result
Cloud Reports
No Result
View All Result

Disable browser ‘Back’ button with Javascript

npn by npn
June 23, 2019
in Web development
Reading Time: 2min read
A A
0

Introduction

While implementing a business application in a certain case the other day, it was implemented because it was implemented with the requirement that “Do not allow browser to return” Leave it to I checked a couple of ways to deal with this problem and I found about 2 patterns … was not implement the business applications in the projects that the other day, you leave on record since the implementation have gotten the requirement that “I want that you do not go back in the browser”.

READ ALSO

Javascript developer should stop for … in for now

Javascript developer should stop for … in for now

December 31, 2020
18
How to display colors (color, bgcolor) in console.log () for javascript developers!

How to display colors (color, bgcolor) in console.log () for javascript developers!

January 22, 2021
11

I checked out a couple of patterns to find out how to handle this problem.

One way is to go back to the original page immediately when you go back to the history by pressing the back button.

But this is not good. Make sure the user’s requirements can not be returned by the browser in the first place.

The second way to achieve this is realistic.

It is a method of deleting the current history when transitioning the page.

We will introduce this method this time.

Let’s conclude by disabling the browser’s “Back” button. We just

history.pushState(null, null, null);
$(window).on("popstate", function (event) {
  if (!event.originalEvent.state) {
    history.pushState(null, null, null);
    return;
  }
});

paste this code into the JS we use on all pages.

Then I will explain what I am doing.

First of all, the history object in the window object below provides methods for manipulating the browser history.

This time, this method is used to clear the previous history immediately after page transition,

and the history object has a pushState method, which can be used to delete the history.

Pass the state object as the first argument of the pushState method, the title as the second argument, and the URL as the third argument.

This time, we do not want to leave the current history at the transition timing, so pass null for all the arguments and change it to an empty history.

history.pushState(null, null, null);

In the above, only the process at the time of the first access can be supported.

When the back button is pressed, the browser tries to keep history, so you have to delete it immediately.

Let’s define the popstate event using the on method to cope with this.

The popstate event is an event that fires when trying to manipulate the browser history. Fires when the browser’s Back or Forward button is pressed.

The passed event event object contains a property called originalEvent.

$(window).on("popstate", function (event) {
  if (!event.originalEvent.state) {
    history.pushState(null, null, null);
    return;
  }
});

This has also prevented the process of leaving a history when you press the back button.

ADVERTISEMENT

Summary

What did you think?

This can easily disable browser back and prevent it from returning.

Isn’t it particularly useful for sites that frequently change data in form submissions?

Tags: back buttonJavaScript
ShareTweetShare
Previous Post

[JS] 2 == 1 = 0 is true

Next Post

Linux find -exec rm -r report No such file or directory

npn

npn

Related Posts

Javascript developer should stop for … in for now
Javascript

Javascript developer should stop for … in for now

December 31, 2020
18
How to display colors (color, bgcolor) in console.log () for javascript developers!
Javascript

How to display colors (color, bgcolor) in console.log () for javascript developers!

January 22, 2021
11
What is Unit Test? Introduction and Example about Unit Test
Web development

What is Unit Test? Introduction and Example about Unit Test

December 24, 2020
6
Accelerate your Continuous Integration pipelines with Directed Acyclic Graph (DAG)
Web development

Accelerate your Continuous Integration pipelines with Directed Acyclic Graph (DAG)

December 22, 2020
3
The FUNDAMENTAL model for learning Web Development.
Web development

The FUNDAMENTAL model for learning Web Development.

December 21, 2020
19
UTM Google, know everything to better use them!
Web development

UTM Google, know everything to better use them!

December 18, 2020
8
Next Post

Linux find -exec rm -r report No such file or directory

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

No Result
View All Result

Categories

  • Android (1)
  • Ant Design tutorial (7)
  • Javascript (21)
  • Layout and Routing (2)
  • Linux (3)
  • PC & Laptop (53)
  • React (17)
  • SQL (2)
  • Technology & Digital (152)
  • The Basics (5)
  • Web development (38)

Search

No Result
View All Result
No Result
View All Result
  • Home
  • Linux
  • Web development
  • Javascript
  • SQL
  • Ant Design tutorial
  • PC & Laptop
  • Technology & Digital