浏览器对pushState的支持与示例

  1 var useHash = false;
  2     var hashExp = /#([0-9]+)/;
  3     
  4     if(!history.pushState) {
  5         useHash = true;
  6     }
  7     
  8     var link = document.getElementById(‘forward‘);
  9     var num = document.getElementById(‘number‘);
 10     
 11     //consolidate the update into one place
 12     function handleStateChange(count) {
 13         num.innerHTML = count;
 14         document.title = ‘Number ‘ + count;
 15         link.href = ‘?num=‘ + (parseInt(count,10) + 1);
 16     }
 17 
 18     function setNumFromUrl() {
 19         if(location.search) {
 20             
 21             var match = location.search.match(/num=([0-9]+)/);
 22             if(match) {
 23                 
 24                 //if pushState doesn‘t work, we need to 
 25                 //scrub the query string and redirect to the hash version
 26                 if(useHash) {
 27                     location = ‘history.html#‘ + match[1];
 28                     
 29                 } else {
 30                     handleStateChange(match[1]);
 31                 }
 32             }
 33             
 34         }else if (location.hash) {
 35             
 36             var match = location.hash.match(hashExp);
 37             
 38             
 39             handleStateChange(match[1]);
 40             
 41             //if the user can use push state, but came with a hash url, 
 42             //we can upgrade the url with replaceState.
 43             if(!useHash) {
 44                 history.replaceState({count:match[1]}, null, 
 45                             ‘history.html?num=‘ + match[1]);
 46             }
 47             
 48         } else {
 49             handleStateChange(1);
 50         }
 51     }
 52     
 53     link.addEventListener(‘click‘, function(e) {
 54         var myNum;
 55         
 56         e.preventDefault();
 57         myNum = parseInt(num.innerHTML, 10);
 58         myNum++;
 59         
 60         if(useHash) {
 61             
 62             location.hash = myNum;
 63             
 64         } else {
 65             
 66             history.pushState({count:myNum}, null, ‘?num=‘ + myNum);
 67             
 68         }
 69         
 70         handleStateChange(myNum);
 71         
 72     });
 73     
 74     
 75     if(!useHash) {
 76         
 77         //this is the lightweight bversion
 78         addEventListener(‘popstate‘, function(e) {
 79             if( e.state && e.state.count ) {
 80                 handleStateChange(e.state.count);
 81             } else {            
 82                 setNumFromUrl();            
 83             }        
 84         });
 85         
 86     } else {
 87         
 88         //because the first popstate isn‘t called,
 89         //we need to call this manually
 90         setNumFromUrl();
 91         
 92         //we need to know the old value
 93         //to be able to see if ti changed
 94         var oldHash = location.hash;
 95         
 96         //poll every 100ms
 97         window.setInterval(function(){
 98 
 99             var match;
100             
101             if( window.hash !== oldHash ){
102                 match = location.hash.match(hashExp);
103                 oldHash = location.hash;
104                 if(match) {
105                     handleStateChange(match[1]);
106                 }
107                 
108             }
109             
110         }, 100);
111     }