Prevent page reloading continuously

Question

I'm using window.history.pushState({) inside a function. This works fine as expected. Below is a an example.

$('#go_btn').click(function(){
   if ($('.green')) {
        var newurl = "cutomurl.html";
        if(newurl!=window.location){
             window.history.pushState({path:newurl},'',newurl);
        }
        return false;
   }
});

and I've also got the below code to be able to refresh the page when the newurl is being triggered by the $('#go_btn') button.

$(window).on('popstate', function(){ 
    location.reload(true); 
});

On the desktop version I don't seem to have any issues. But when I try to load this page on my iPad it continuously keeps on reloading the page over an over again. So how do I stop the continuous reloading and make the page refresh only when window.history.pushState({path:newurl},'',newurl); is being triggered?

Answer 1

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event is only triggered by doing a browser action such as clicking on the back button (or calling history.back() in JavaScript). And the event is only triggered when the user navigates between two history entries for the same document.

Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari always emit a popstate event on page load, but Firefox doesn't .
According to Mozzila Developer Network
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate

Safari always emit a popstate event on page load. It means that

1. Your page loads
2. Popstate event occurs
3. location.reload() executes
4. It is repeating

Update : Please, read a documentation about manipulation the browser history. https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

It looks like you misunderstand some functionality.

You have a #go_btn button. When you click it, you want a page to:

1. Reload

Use location.reload()

if (newurl != window.location)
{
    // window.history.pushState({path:newurl},'',newurl);
    location.reload(true);
}

2. Navigate to a new URL

Use location.href . It will open new page in a current window .

if (newurl != window.location)
{
    // window.history.pushState({path:newurl},'',newurl);
    location.href = newurl;
}

3. Change the URL in browser history and address bar without doing anything.

Use window.history.pushState() or window.history.replaceState() . It doesn't open a new page or reloads it. It is only used when you are not going to navigate but want user to get new URL (for convenient browsing, history or favorites).

if (newurl!=window.location)
{
    window.history.pushState({path:newurl},'',newurl);
}

In all of there three cases you don't need popstate event. It is used for other purposes.

Which one do you need? It's up to your task.
Anyway, using any two of them together is not illogical and useless. What is the reason of pushing the history state if you are going to refresh the page? Navigate to it then.