Do something on window.onpopstate or window.onload but never twice

Question

I would like to write a javascript code able to do something on either window.onpopstate or window.onload but never twice (note that chrome fires a popstate event both onload and when clicking the back navigation button)

I would like it to be compatible for major modern browsers (IE10 firefox chrome opera safari)

And i would prefer NOT to use any library - not even jquery.

Something like this (but with the right syntax of course):

window.onload || window.onpopstate = function(){
    window.alert("hello world");
}

Thanks

EDIT 1

With ur suggestions i have tried this:

var ranAlready=false;

window.onload = function(){
if (!ranAlready){
    window.alert("onload was true");
    ranAlready=true;
}
};

window.onpopstate = function(){
if (!ranAlready){
    window.alert("popstate was true");
    ranAlready=true;
}
};

But now im not sure how to set the variable back to false.. cuz it depends on the browser and so on..

EDIT 2

I need it to work more than once, because the user might click some ajax links, and so the page wont refresh but the url will change and thus he might click the back button. This means the variable has to be set back to false at some moment / but i dont know when..

that would work? i get confused becasue i dont know how to control the timeflow, like, will that variable take the value before or after or at the same time that im checking it..? — fartagaintuxedo, Aug 28 '13 at 17:53

score 2 · Answer 1 · edited May 23 '17 at 11:53

2

The problem is that in Chrome, the "popstate" event is fired on page load, so the handler would run twice. You can fix this by checking the history state when running on popstate to detect if it's running on initial load.

function showAlert() {
    window.alert("hello world");
}
function showAlertOnPopState(){
    if (window.history.state == null){ // This means it's page load
        return;
    }
    showAlert();
}

window.onload = showAlert;
window.onpopstate = showAlertOnPopState;

Fiddle: http://jsfiddle.net/ER8zC/2/

Found the history.state trick here: Popstate on page's load in Chrome

edited May 23 '17 at 11:53

Community

1
1

answered Aug 28 '13 at 17:53

htxryan

2,871
2
21
21

this is a syntax error `window.onload || window.onpopstate = function(){` – fartagaintuxedo Aug 28 '13 at 17:54
Updated answer. I had assumed your original syntax was valid. – htxryan Aug 28 '13 at 18:08
thanks, see also my edit, how do i set the variable back to false now? – fartagaintuxedo Aug 28 '13 at 18:09
The variable will automatically be set to false on page load. You mentioned that you only wanted to run this function once per page load, and this will do that. – htxryan Aug 28 '13 at 18:10
when i load the page it works, but then if i click a couple of (ajax) links on the menu and then hit the back button (a popstate event) it wont work anymore because the variable is set to true.. – fartagaintuxedo Aug 28 '13 at 18:12
Your original question: "I would like to write a javascript code able to do something on either window.onpopstate or window.onload but never twice". I took that to mean you want to execute this function ONLY ONCE no matter what. If that is not correct please update your question to be more clear. – htxryan Aug 28 '13 at 18:14
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/36409/discussion-between-fartagaintuxedo-and-ryan-henderson) – fartagaintuxedo Aug 28 '13 at 18:15

Do something on window.onpopstate or window.onload but never twice

1 Answers1