history.pushState的问题

Question

我正在尝试实现history.pushState，同时使用.load()函数加载内容而不重定向页面，.load()功能运行良好，history.pushState在第一个实现上运行。但是当我点击另一个链接时，它会附加到url上...

我的意思是：

网址：https://materialwebdesign.ltd

点击链接，URL变成：https://materialwebdesign.ltd/inc/material-design

单击另一个链接，URL变为：https://materialwebdesign.ltd/inc/inc/bootstrap

为什么会发生这种情况？下面是我的代码：

$(document).ready(function() {

    $('#main_content').load('inc/main-content.html', function() {
        $(this).animate({ height: '100%', width: '100%' }, 2000, 'linear');
    });

    $('.dynamic').click(function(e) {

        e.preventDefault();

        var page = $(this).attr('href');

        var title = page.title;

        $('#main_content').html('<div class="mdl-spinner mdl-js-spinner is-upgraded is-active"></div>');

        if (typeof (history.pushState) != 'undefined') {

            var obj = {Title: title, Url: page}

            $('#main_content').load(page + '.html', function() {
                $(this).animate({ height: '100%', width: '100%' }, 2000, 'linear')
            });

            if(page != window.location){
              history.pushState(obj, obj.Title, obj.Url);
            }

            return false; // don't follow the link

        };

    });
});

除了上面提到的问题，动画只是没有动画，如果你也能帮助我，我将非常感激

Answer 1

obj.Url是一个相对网址，因此它是相对于页面的当前网址进行解释的。因为它包含一个子目录，所以每次执行此操作时，都会向当前页面的URL添加另一个级别的子目录。

使用this.href代替返回属性中的相对URL的$(this).attr('href') --这将返回href属性，这是规范化后的一个绝对URL。