-
-
Save louisremi/1326553 to your computer and use it in GitHub Desktop.
popstate, polyfill that executes window.onpopstate callback whenever location.hash changes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| !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) | |
| }() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| !function(a){history.pushState||function f(b){a!=(a=location.hash)&&!b&&(b=self.onpopstate)&&b();setTimeout(f,300)}(1)}() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "popstate", | |
| "description": "polyfill that executes window.onpopstate callback whenever location.hash changes", | |
| "contributors": [ | |
| "louisremi", | |
| "tsaniel", | |
| "atk" | |
| ], | |
| "keywords": [ | |
| "polyfill", | |
| "history", | |
| "DOM", | |
| "onpopstate" | |
| ] | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Is the w.pushState actually history.pushState?
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)
?
Author
oops, oops, oops, you're right tsaniel. But it seems that you forgot about tmp = currHash
let me give it a try
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)}()
why use document.location.hash instead of location.hash?
Good point, @atk.
Author
Alright, thank you guys
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?
location doesn't live on the document, it lives on the window.
2011/10/31 Louis-Rémi Babé
reply@reply.github.com:
… 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?
##
Reply to this email directly or view it on GitHub:
https://gist.github.com/1326553
also, if location is overwritten, the page is reloaded.
Author
Ok, thanks for the reminder
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
(function(){})()=>!function(){}()