javascript history.js - 正确的实现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9645920/
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
history.js - the correct implementation
提问by Torben
i load my content on my site in a div called #container with JQuery/Ajax. I have to different types of of links:
我使用 JQuery/Ajax 在名为 #container 的 div 中加载我的网站上的内容。我必须使用不同类型的链接：
- normal anchor-links
- JQuery-Triggers which fire an event when clicked on a specific div.
- 普通锚链接
- 单击特定 div 时触发事件的 JQuery 触发器。
Now i want to add functionality to support back and forward browser-buttons and bookmark functionality. I came across history.js, but i have a few problems with it and can't find a really easy tutorial how to use it properly.
现在我想添加功能来支持后退和前进浏览器按钮和书签功能。我遇到了 history.js，但我遇到了一些问题，并且找不到如何正确使用它的非常简单的教程。
My links:
我的链接：
<a href='#imprint' class='link_imprint'>Imprint</a>
I read that it is better for SEO to use <a href="imprint/"... but that URL would not be found on my server. So my firstquestion is, how i can ensure that myurl.com/imprint is working and does not result in a 404-page?
我读到使用 SEO 会更好<a href="imprint/"……但是在我的服务器上找不到该 URL。所以我的第一个问题是，我如何确保 myurl.com/imprint 正常工作并且不会导致 404 页？
Coming to history.js... At the moment i included the following code in my index.php right behind the <body>
来到 history.js ......此刻我在我的 index.php 中包含了以下代码 <body>
<script>
$(document).ready(function(){
(function(window,undefined){
// 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
alert("state");
var State = History.getState(); // Note: We are using History.getState() instead of event.state
});
History.Adapter.bind(window,'anchorchange',function(){
});
var currentState = History.getState();
var currentUrl = currentState.url;
var urlParts = currentUrl.split('#');
$('#container').load('templates/'+ urlParts[1] +'.php');
$('#footer.credits').on('click','.link_imprint',function() {
var currentUrl = $(this).attr('href');
var urlParts = currentUrl.split('#');
History.pushState(null,null,currentUrl);
$('#container').load('templates/'+ urlParts[1] +'.php');
});
})(window);
});
With this code, after clicking the link the URL changes to: myurl/#imprint and imprint.php is loaded in the container.php. But when i now click the back-button the URL changes, but the content is still the one from the imprint. How can i ensure that the container refreshes with the old content? I think i forgot something, but i don't know what i should do. I tried it with statechange/anchorstate but none of both events will be fired when i click the back-button.
使用此代码，单击链接后，URL 更改为：myurl/#imprint 并且 imprint.php 加载到 container.php 中。但是，当我现在单击后退按钮时，URL 发生了变化，但内容仍然是印记中的内容。如何确保容器用旧内容刷新？我想我忘记了一些事情，但我不知道我应该做什么。我用 statechange/anchorstate 尝试过，但是当我单击后退按钮时，这两个事件都不会被触发。
Thanks for helping me out.
谢谢你的协助。
P.S: I added an alert to the state change-event, but it will never be fired. That can't be correct, right? I can see the anchorchange-event fires, when i click on the link and the url changes to myurl.com/#imprint...
PS：我向状态更改事件添加了警报，但它永远不会被触发。这不可能是正确的，对吧？当我单击链接并且 URL 更改为 myurl.com/#imprint 时，我可以看到 anchorchange 事件触发...
回答by devote
For older browsers, you can use this library: https://github.com/devote/HTML5-History-APIit completely emulates the history in older browsers.
对于较旧的浏览器，您可以使用此库：https: //github.com/devote/HTML5-History-API它完全模拟旧浏览器中的历史记录。
$( document ).ready(function() {
function loadContent( href ) {
alert( "loading content... from url: " + href );
// load dynamic content here
}
$( window ).bind( 'popstate', function( e ) {
// the library returns the normal URL from the event object
var cLocation = history.location || document.location;
alert( [ cLocation.href, history.state ] );
loadContent( cLocation.pathname + cLocation.search + cLocation.hash );
});
$('#footer.credits').on('click','.link_imprint',function() {
var currentUrl = $( this ).attr( 'href' );
loadContent( currentUrl );
history.pushState( null, null, currentUrl );
});
});
