JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://www.google.com/" id="homepage">Home</a>
<button type="button" id="back">Back</button>
<button type="button" id="refresh">Refresh</button>

JavaScript

// assume that the homepage button has an id "homepage".
var btn = document.getElementById('homepage'),
    back = document.getElementById('back'),
    refresh = document.getElementById('refresh'),
    clicked = false;

btn.addEventListener('click', function () {
  clicked = true;
});

back.addEventListener('click', function () {
  //history.back();
});

refresh.addEventListener('click', function () {
  location.reload();
});

window.addEventListener('load', function() {
    //history.pushState(null, null, document.URL);
});


$('*').click(function(event) {
    if (this === event.target) { // only fire this handler on the original element
      clicked = false;  
      //alert('clicked');
    }
});

//window.addEventListener('load', function() {
  
    
      if (window.history && window.history.pushState) {
    
        //window.history.pushState({page: 1}, "", "");
        window.addEventListener('popstate', function(event) {
          if(clicked) {
            console.log(window.history.pushState)
            var r = confirm("You pressed a Back button! Are you sure?!");
                
            if (r == true) {
                history.back();
            } else {
               // history.pushState(null, null, window.location.pathname);

            }
          } else {
					  history.back();
					}
        });
      }
    
  
//});