我试图使用Ajax更改页面内容的同时伪造页面URL。我还将jquery过渡与此ajax结合使用,但是当我添加pushstate更改URL时,它将阻止ajax更改页面内容。
如果我注释掉// // window.history.pushState(null,“ null”,href)这行,则过渡效果很好,但是URL不变。谁能看到我在做什么错?
$(“#contactRoll”)。on(“ click”,function(event){
event.preventDefault();
$(document).attr("title", "Contact Page");
//get the 'fake' link
const href = $(this).attr("href")
//fake the url
window.history.pushState(null, "null", href)
$('.main-logo').fadeOut(500)
$('.main-logo-reverse').delay(500).fadeIn(300)
$.ajax({
//set the fake url
url: href,
success: function (data) {
$("header").animate({marginTop: "100vh"}, function () {
const newPage = $(data).filter("#main").html()
$("#main").html(newPage)
$("section#contact").animate({marginTop: "0vh"})
})
}
})
})
答案 0 :(得分:0)
https://developer.mozilla.org/en-US/docs/Web/API/History_API
使用history.pushState()更改在更改状态后创建的XMLHttpRequest对象的HTTP标头中使用的引用程序。引荐来源网址将是创建XMLHttpRequest对象时其窗口是此窗口的文档的URL。
尝试添加
//fake the url
window.history.pushState(null, "null", href)
到success: function(data) { ... }
回调,以便在Ajax请求完成后更改url状态。
$.ajax({
url: href,
success: function (data) {
//fake the url
window.history.pushState(null, "null", href)
$("header").animate({marginTop: "100vh"}, function () {
const newPage = $(data).filter("#main").html()
$("#main").html(newPage)
$("section#contact").animate({marginTop: "0vh"})
})
}
})