Skip to content

Instantly share code, notes, and snippets.

@louisremi

louisremi/LICENSE.txt

Forked from 140bytes/LICENSE.txt
Created October 30, 2011 22:45
Show Gist options
  • Save louisremi/1326553 to your computer and use it in GitHub Desktop.
Save louisremi/1326553 to your computer and use it in GitHub Desktop.
Download ZIP
popstate, polyfill that executes window.onpopstate callback whenever location.hash changes
Raw
annotated.js
!function( currHash ){
// feature detection + setInterval based polyfill
history.pushState || function checkHash( init ) {
// save current hash for next check when check if hash has changed
currHash != ( currHash = location.hash )
// and vars are not being initialized
&& !init
// and callback exists
&& ( init = self.onpopstate )
// then execute onpopstate callback
&& init();
// schedule next check
setTimeout( checkHash, 300 )
// init
}(1)
}()
Raw
index.js
!function(a){history.pushState||function f(b){a!=(a=location.hash)&&!b&&(b=self.onpopstate)&&b();setTimeout(f,300)}(1)}()
Raw
LICENSE.txt
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 @louis_remi <http://louisremi.com>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
Raw
package.json
{
"name": "popstate",
"description": "polyfill that executes window.onpopstate callback whenever location.hash changes",
"contributors": [
"louisremi",
"tsaniel",
"atk"
],
"keywords": [
"polyfill",
"history",
"DOM",
"onpopstate"
]
}
Raw
test.html
<!DOCTYPE html>
<title>Foo</title>
<div>Current hash: <b id="currHash">undefined</b></div>
<ul>
<li><a href="#first hash">first link</a></li>
<li><a href="#second hash">second link</a></li>
<li><a href="#third hash">third link</a></li>
</ul>
<script>
!function(a){history.pushState||function f(b){a!=(a=location.hash)&&!b&&(b=self.onpopstate)&&b();setTimeout(f,300)}(1)}()
window.onpopstate = function() {
document.getElementById("currHash").innerHTML = location.hash;
};
</script>
@jed
Copy link

jed commented Oct 31, 2011

(function(){})() => !function(){}()

@tsaniel
Copy link

tsaniel commented Oct 31, 2011

Is the w.pushState actually history.pushState?

@tsaniel
Copy link

tsaniel commented Oct 31, 2011

So what about

!function(a,b){history.pushState||function f(c){b!=(b=document.location.hash)&&!c&&(c=a.onpopstate)&&c();setTimeout(f,300)}(1)}(this)

?

@louisremi
Copy link
Author

oops, oops, oops, you're right tsaniel. But it seems that you forgot about tmp = currHash
let me give it a try

@tsaniel
Copy link

tsaniel commented Oct 31, 2011

Here's what i did.

annotated:

!function( currHash ){

// feature detection + setInterval based polyfill
history.pushState || function checkHash( init ) {

  // save current hash for next check when check if hash has changed 
  currHash != ( currHash = location.hash )
  // and vars are not being initialized
  && !init
  // and callback exists ( reusing variable init )
  && ( init = self.onpopstate )
  // then execute onpopstate callback
  && init();

  // schedule next check
  setTimeout( checkHash, 300 )

// init
}(1)

}()

minimized:

!function(a){history.pushState||function f(b){a!=(a=location.hash)&&!b&&(b=self.onpopstate)&&b();setTimeout(f,300)}(1)}()

@atk
Copy link

atk commented Oct 31, 2011

why use document.location.hash instead of location.hash?

@tsaniel
Copy link

tsaniel commented Oct 31, 2011

Good point, @atk.

@louisremi
Copy link
Author

Alright, thank you guys

@louisremi
Copy link
Author

Well, on the other hand location isn't a protected keyword and could easily be overwritten.
Wouldn't it be safer to use document.location.hash?

@jed
Copy link

jed commented Oct 31, 2011 via email

@jed
Copy link

jed commented Oct 31, 2011

also, if location is overwritten, the page is reloaded.

@louisremi
Copy link
Author

Ok, thanks for the reminder

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment