主页加载两次onpopstate

Question

我用php包含了一个ajax #container div：

<div id="container">
	   <?php
       $d="pages/";
       if(isset($_GET['p'])){
           $p=strtolower($_GET['p']);
        if(preg_match("/^[a-z0-9\-]+$/",$p) && file_exists($d.$p.".html")){
           include $d.$p.".html";
        }
         else{
           include $d."404.html";
            }
            }
       ?>
	</div>

我使用onpopstate（当我的状态为null加载home.html，否则加载历史页面）来模拟历史记录。 问题是当我的页面statut是state = null（第一页加载）我的页面加载两次因为包含，我该如何修复它？ 这是我的阿贾克斯：

var afficher = function ( data, page ) {
    $( '#container' ).delay ( 300 ).fadeOut ( 400, function () {
        $( '#container' ).empty (); 
        $( '#container' ).append ( data );
		$( '#container' ).fadeIn ( 500, function (){
        } );

    } );
};

var loadPage = function ( page, storeHistory ) {
    if ( typeof storeHistory === 'undefined' ) {
        var storeHistory = true;
    }
    
    $.ajax ( {
        url: 'pages/' + page,
        cache: false,
        success: function ( html ) {
            afficher ( html, page );
            if ( storeHistory === true ) {
                history.pushState ( { 'key': 'value', 'url': page }, '', page );
            }
        },
        error: function ( XMLHttpRequest, textStatus, errorThrown ) {
            afficher ( 'erreur lors du chagement de la page' );
        }
    } );
    
    return false;
};

window.onpopstate = function ( e ) {
    if ( e.state === null ) {
        loadPage ( 'home.html' );
    } else {
        loadPage ( e [ 'state' ] [ 'url' ], false );
    }
};

$( document ).ready ( function () {
    $( '#menu a' ).on ( 'click',function ( e ) {
        var page = $( this ).attr ( 'href' );
        loadPage ( page );
        return false;
    } );
    
    $( '#container' ).on ( 'click', '.vs-transform a', function () {
        var page = $( this ).attr ( 'href' );
        loadPage ( page );
        return false;
    } );
} );

Answer 1

某些浏览器将页面加载视为popstate事件。您需要将popstate事件的绑定推迟到页面加载之后：

window.addEventListener('load', function() {
    setTimeout(function() {
        window.addEventListener('popstate', function() {
            //do stuff
        });
    }, 0);
});

请参阅here