javascript – history.js – 正确的实现

我在我的网站上加载了一个名为#container的div与JQuery / Ajax.我必须使用不同类型的链接：

>普通的锚链接
> JQuery-Triggers在单击特定div时触发事件.

现在我想添加支持后退和前进浏览器按钮和书签功能的功能.我遇到了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：我在状态变化事件中添加了警报,但它永远不会被解雇.这不可能是正确的,对吗？当我点击链接并且网址更改为myurl.com/#imprint时,我可以看到anchorchange-event触发…

解决方法:

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

标签：jquery,javascript,history-js
来源： https://codeday.me/bug/20190613/1233969.html