如何开始使用history.js？

我一直试图在最后几个小时学习History.js。我创建了三个非常简单的测试文件，但我似乎无法获得任何工作。这里是我的三个文件的内容。如何开始使用history.js？

history.html：

<!doctype html> 
<html> 
    <head> 
     <title>History Test</title> 
     <script type="text/javascript" src="jquery-1.10.1.min.js"></script> 
     <script type="text/javascript" src="jquery.history.js"></script> 
     <script type="text/javascript" src="history.js"></script> 
    </head> 
    <body> 
     <a href="about.html">about</a> 
    </body> 
</html>

history.js：

$(document).ready(function() { 
    History.Adapter.bind(window, 'statechange', handleStateChange); 
}); 

function handleStateChange() { 
    alert("State changed..."); 
}

about.html：

<!doctype html> 
<html> 
    <head> 
     <title>About</title> 
    </head> 
    <body> 
     About... 
    </body> 
</html>

当我点击 '关于' 链接，为什么不statechange事件火灾或我的handleStateChange（）函数执行？

来源

2013-06-19 Rob Johansen

我会回答我自己的问题，以防别人帮助别人。我误以为只要浏览器的URL发生变化（例如点击链接或点击后退按钮），'statechange'事件就会触发。我发现的是，'statechange'只有在你将某些东西推到历史记录上时才会发生。所以，我更新了我的JavaScript来一个监听器添加到链接...

history.js：

$(document).ready(function() { 
    History.Adapter.bind(window, 'statechange', handleStateChange); 
    $("#about").click(function() { 
     History.pushState(null, null, "about.html"); 
    }); 
}); 

function handleStateChange() { 
    alert("State changed..."); 
}

...现在我得到的警报，当我点击链接，当我点击浏览器的返回键。

来源

2013-06-20 14:20:48

嗨外星人，你能把你的完整演示给我吗？我已经完成了你的教学，但没有警觉。谢谢 –

如何开始使用history.js？

回答

相关问题