我正在尝试实现history.pushState,同时使用.load()函数加载内容而不重定向页面,.load()功能正常工作,而history.pushState适用于第一个实现。但当我点击另一个链接时,它会附加到网址...
这就是我的意思:
主要网址:https://materialwebdesign.ltd
点击链接,网址变为:https://materialwebdesign.ltd/inc/material-design
点击其他链接,网址变为: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
};
});
});
除了上面提到的问题,动画也没有动画,如果你能帮助它,我会非常感激
答案 0 :(得分:1)
obj.Url
是相对网址,因此会相对于网页的当前网址进行解释。由于它包含一个子目录,因此每次执行此操作时,都会在当前页面的URL中添加另一级子目录。
而不是返回属性中相对URL的$(this).attr('href')
,而是使用this.href
- 这将返回href
属性,这是规范化后的绝对URL。