jQuery 和 history.js 示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13553037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery & history.js example
提问by David
I'm having a little trouble using history.js with jQuery. I just wanted to make a navigation set work with the back button (which they do seem to be doing quite nicely). However. When I click the back button the url changes to the old (which again is good and what I want) but the content does not replace as it should.
我在使用带有 jQuery 的 history.js 时遇到了一些麻烦。我只是想让导航集与后退按钮一起工作（他们似乎做得很好）。然而。当我单击后退按钮时，url 更改为旧的（这又是好的，也是我想要的），但内容并未按应有的方式替换。
To make this a little more understandable here's some code.
为了使这更容易理解，这里有一些代码。
<ul class="content_links">
<li><a href="/historyapi/pages/content_page_1.html">Content page 1</a></li>
<li><a href="/historyapi/pages/content_page_2.html">Content page 2</a></li>
<li><a href="/historyapi/pages/content_page_3.html">Content page 3</a></li>
<li><a href="/historyapi/pages/content_page_4.html">Content page 4</a></li>
<li><a href="/historyapi/pages/content_page_5.html">Content page 5</a></li>
</ul>
<div id="content">
<p>Content within this box is replaced with content from supporting pages using javascript and AJAX.
</div>
Obviously what I want is the content of the pages load into content which is done nice and easily with .load() and then I want the back button to move backwards through them if the user uses it. At the moment the URLs change but the content in the box does not. How would I go about changing or fixing that?
显然我想要的是页面的内容加载到内容中，使用 .load() 可以很好地轻松完成，然后我希望后退按钮在用户使用时向后移动。目前 URL 发生了变化，但框中的内容没有发生变化。我将如何更改或修复它？
回答by sroes
Try the following:
请尝试以下操作：
<ul class="content_links">
<li><a href="/historyapi/pages/content_page_1.html">Content page 1</a></li>
<li><a href="/historyapi/pages/content_page_2.html">Content page 2</a></li>
<li><a href="/historyapi/pages/content_page_3.html">Content page 3</a></li>
<li><a href="/historyapi/pages/content_page_4.html">Content page 4</a></li>
<li><a href="/historyapi/pages/content_page_5.html">Content page 5</a></li>
</ul>
<div id="content">
<p>Content within this box is replaced with content from supporting pages using javascript and AJAX.
</div>
<script>
$(function() {
// Prepare
var History = window.History; // Note: We are using a capital H instead of a lower h
if ( !History.enabled ) {
// History.js is disabled for this browser.
// This is because we can optionally choose to support HTML4 browsers or not.
return false;
}
// Bind to StateChange Event
History.Adapter.bind(window,'statechange',function() { // Note: We are using statechange instead of popstate
var State = History.getState();
$('#content').load(State.url);
/* Instead of the line above, you could run the code below if the url returns the whole page instead of just the content (assuming it has a `#content`):
$.get(State.url, function(response) {
$('#content').html($(response).find('#content').html()); });
*/
});
// Capture all the links to push their url to the history stack and trigger the StateChange Event
$('a').click(function(evt) {
evt.preventDefault();
History.pushState(null, $(this).text(), $(this).attr('href'));
});
});
</script>
回答by Tom Walter
it seems the following bit doesn't work:
似乎以下位不起作用：
$.get(State.url, function(response) {
$('#content').html($(response).find('#content').html());
});
You have to convert the 'response' into a dom element before you can use 'find' on it. Like so:
您必须先将“响应”转换为 dom 元素，然后才能对其使用“查找”。像这样：
$.get(State.url, function(response) {
var d = document.createElement('div');
d.innerHTML = response;
$('#content').html($(d).find('#content').html());
});
