浏览器对pushState的支持与示例

浏览器的支持情况：

平台	浏览器history API支持情况
IOS	4.2-4.3*,5.0+
Android	2.2,2.3,4.04+
Chrome for Android	All versions
Internet Explorer	10+（windows phone8）

  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     }

演示地址：http://jsbin.com/mexadu/1?num=1