Question

我将我的内容加载到我的网站上，在一个名为#container的div中使用JQuery / Ajax。我必须使用不同类型的链接：

普通的锚链接
点击特定div时触发事件的JQuery-Triggers。

现在我想添加支持后退和前进浏览器按钮和书签功能的功能。我遇到了history.js，但我遇到了一些问题，找不到一个非常简单的教程如何正确使用它。

我的链接：

<a href='#imprint' class='link_imprint'>Imprint</a>

我读到SEO最好使用<a href="imprint/" ...但是我的服务器上找不到该URL。所以我的第一个问题是，我如何确保myurl.com/imprint正常运行并且不会产生404页？

来到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);
});

使用此代码，点击链接后，URL将更改为：myurl /＃imprint和imprint.php将加载到container.php中。但是当我现在点击后退按钮时，URL会发生变化，但内容仍然是来自印记的内容。如何确保容器使用旧内容刷新？我想我忘了什么，但我不知道该怎么做。我尝试使用statechange / anchorstate，但是当我点击后退按钮时，都不会触发这两个事件。

感谢您帮助我。

P.S：我为状态更改事件添加了警报，但它永远不会被触发。这不可能是正确的，对吗？我可以看到anchorchange-event触发，当我点击链接并且网址更改为myurl.com/#imprint ...

Answer 1

对于旧版浏览器，您可以使用此库：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 );
    });
});

history.js - 正确的实现

1 个答案: