Question

我试图将history.pushState实现到我们的网站中以取代哈希爆炸，但我很困惑为什么每次点击链接而不是将href值附加到当前网址上时，例如www.abc.com/123.php/20即使我仍然在123.php页面（希望这是有道理的），它反而使它成为www.abc.com/20。

我还应该指出下面的html是通过php创建的。

我已经阅读了很多教程，解释了如何实现这一点并阅读了很多文章，但仍然没有运气。此外，我发现的所有教程都显示了这与主菜单一起工作，但这是使用一个用Ajax加载数据的项目网格。

非常感谢任何帮助！

＆＃13;

<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>

＆＃13;

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

＆＃13;

Answer 1

pushState允许您将网址更改为同一来源的任何有效网址。

您的链接（用作计算pushState内容的基础）表示转到30。您当前的网址为http://www.example.com/123.php。不以/字符开头的相对URL的标准分辨率是丢弃最后一个路径部分及其后的所有内容（/123.php），然后将相对URL放在其位置。

您应该编写您的JavaScript，以便更改您操作DOM的URI，以便生成的页面与您刚刚访问过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结尾，因此您可能希望使用相对于href="/123.php/20"的网址root：{{1}}。

Answer 2

这是因为你有href =＆＃34; 30＆＃34;在a元素中，然后将历史记录设置为e.attr（＆＃39; href＆＃39;）。您需要传递整个链接。

history.pushState删除部分网址

2 个答案: