history.pushState удаление части url

Question

Я пытаюсь внедрить history.pushState на наш сайт, чтобы заменить хеш-челки, но я озадачен тем, почему каждый раз, когда я нажимаю ссылку, вместо добавления значения href на текущий URL, например www.abc.com/123.php/20 он делает это www.abc.com/20, хотя я все еще на странице 123.php (надеюсь, это имеет смысл).

Следует также указать, что html, приведенный ниже, создается через php.

Я прочитал немало учебников, объясняющих, как реализовать это и прочитать много статей, но все равно не повезло. Также все обучающие программы, которые я нашел, показывают, что это работает с основным меню, но это работает с сетью проектов, которые загружаются в данные с помощью Ajax.

Любая помощь была бы чрезвычайно оценена!

<a id="projectAnchor" class="projectItem powerline" href="30" style="position: absolute; left: 5px; top: 5px;"> 
 
\t <div id="imgContainer" name="Western Power Distribution - Brechfa Connection" href="#!30"> 
 
\t \t <img id="projectImg" src="projectContent/30/198-th.jpeg" alt="Western Power Distribution - Brechfa Connection"> 
 
\t </div> 
 
\t <img id="projectIcon" src="images/solution/powerlineIconB.png" alt="Powerline"> \t \t \t \t 
 
\t \t <p id="projectText">Western Power Distribution - Brechfa Connection</p> 
 
\t \t <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()+'"]'); 
 
\t getResults(); 
 
}); 
 

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

Answer 1

pushState позволяет изменить URL, чтобы любой действительный URL на том же происхождения.

Ваша ссылка (которую вы используете в качестве основы для расчета того, что происходит в pushState) говорит, чтобы перейти к 30. Ваш текущий URL-адрес: http://www.example.com/123.php. Стандартное разрешение относительных URL-адресов, которые не начинаются с символа /, заключается в том, чтобы отбросить последнюю часть пути и все после нее (/123.php), а затем поместить относительный URL на свое место.

Вы должны написать JavaScript, так что, как и изменения URI вы манипулировать DOM, так что в результате страница такая же, как вы бы получить, если бы вы только что посетили http://www.example.com/20 в первую очередь.

Если вы на самом деле хотите перейти на http://www.example.com/123.php/20, то вам нужно связаться с ним: href="123.php/20".

Конечно, это может привести к вам истекающим до http://www.example.com/123.php/123.php/30, если вы будете следовать ссылке на 20 и потом еще 30, так что вы, вероятно, хотите использовать URL относительно корня: href="/123.php/20".

Answer 2

Это потому, что у вас есть href = "30" в элементе a, а затем вы установите историю на e.attr ('href'). Вам нужно передать всю ссылку.