使用pushstate更改页面URL阻止ajax工作

时间:2019-06-10 13:35:10

标签: jquery ajax browser-history pushstate

我试图使用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"})

    })
  }
})

})

1 个答案:

答案 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"})

      })
    }
  })