history.js - 正确的实现 [英] history.js - the correct implementation
问题描述
我将我的内容加载到我的网站上，在一个名为#container的div中使用JQuery / Ajax。我必须使用不同类型的链接：
i load my content on my site in a div called #container with JQuery/Ajax. I have to different types of of links:
- 普通的锚点链接
- JQuery-Triggers触发事件时点击一个特定的div。
现在我想添加支持前后浏览器按钮和书签功能的功能。我遇到过history.js，但我遇到了一些问题，找不到一个非常简单的教程如何正确使用它。
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.
我的链接：
<a href='#imprint' class='link_imprint'>Imprint</a>
我读到SEO最好使用< a href = imprint / ...但在我的服务器上找不到该URL。所以我的第一个问题是，我如何确保myurl.com/imprint正常运行并且不会产生404页？
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 first question is, how i can ensure that myurl.com/imprint is working and does not result in a 404-page?
来到history.js ...目前我在index.php中包含以下代码，紧跟在< body>
Coming to history.js... At the moment i included the following code in my index.php right behind the <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);
});
使用此代码，点击链接后，URL将更改为：myurl /＃imprint和imprint.php加载在container.php中。但是当我现在点击后退按钮时，URL会发生变化，但内容仍然是来自印记的内容。如何确保容器使用旧内容刷新？我想我忘了什么，但我不知道该怎么做。我尝试使用statechange / anchorstate，但是当我点击后退按钮时，两个事件都不会被触发。
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.
感谢您帮助我。
PS：我在状态更改事件中添加了警报，但它永远不会被触发。这不可能是正确的，对吗？我可以看到anchorchange-event触发，当我点击链接并且url更改为myurl.com/#imprint ...
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...
推荐答案
对于旧版浏览器，您可以使用此库： https://github.com/devote / HTML5-History-API 它完全模拟旧浏览器中的历史记录。
For older browsers, you can use this library: https://github.com/devote/HTML5-History-API it completely emulates the history in older browsers.
$( 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 );
});
});
这篇关于history.js - 正确的实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
