history.pushState删除部分网址

Question

I'm trying to implement history.pushState into our website to replace hash bangs but I'm puzzled as to why every time I click on a link that instead of appending the href value onto the current url e.g. www.abc.com/123.php/20 it instead makes it www.abc.com/20 even though I am still on the 123.php page (hopefully that makes sense).

I should also point out the the html below is created via php.

I have read quite a few tutorials explaining how to implement this and read a lot of articles, but still no luck. Also all the tutorials I have found show this working with the main menu but this is working with a grid of projects that load in data with Ajax.

Any help would be hugely appreciated!

<a id="projectAnchor" class="projectItem powerline" href="30" style="position: absolute; left: 5px; top: 5px;">
    <div id="imgContainer" name="Western Power Distribution - Brechfa Connection" href="#!30">
        <img id="projectImg" src="projectContent/30/198-th.jpeg" alt="Western Power Distribution - Brechfa Connection">
    </div>
    <img id="projectIcon" src="images/solution/powerlineIconB.png" alt="Powerline">               
        <p id="projectText">Western Power Distribution - Brechfa Connection</p>
        <div class="blueBar" id="colourBar"> </div>
</a>

var e, p;
$(function(){
    p = $(".projectItem").click(function() {
        e = $(this);
        if(!e.hasClass('active')){
            getResults();
            history.pushState(null, null, e.attr('href'));
        }
        return false;
    });
});

window.addEventListener("popstate", function(){
    e = $('a[href="'+location.pathname.split("/").pop()+'"]');
    getResults();
});

function getResults(){
    p.removeClass('active');
    e.addClass('active');
    $.get('projectT.php', {id: e.attr('href')}, function(data){
        $('#projectContent').html(data);
    });
}

</div>

Answer 1

pushState allows you to change the URL to any valid URL on the same origin.

Your link (which you use as the basis to calculate what goes into pushState) says to go to 30. Your current URL is http://www.example.com/123.php. Standard resolution of relative URLs which don't begin with a / character is to discard the last path part and everything after it (/123.php) and then put the relative URL in its place.

You should write your JavaScript so that as well as changing the URI you manipulate the DOM so the resulting page is the same as you would get if you had just visited http://www.example.com/20 in the first place.

If you actually want to go to http://www.example.com/123.php/20 then you have to link to that: href="123.php/20".

Of course, that could lead to you ending on up http://www.example.com/123.php/123.php/30 if you follow a link to 20 and then another to 30 so you probably want to use a URL relative to the root: href="/123.php/20".