duanheye7909 2015-02-25 16:42
浏览 287
已采纳

history.pushState删除部分网址

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>
  • 写回答

2条回答 默认 最新

  • douminfu8033 2015-02-25 17:00
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 聚类分析或者python进行数据分析
  • ¥15 如何用visual studio code实现html页面
  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js,页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?