Изменение URL страницы с помощью pushstate, препятствующего работе ajax - PullRequest
Новая
       44

Изменение URL страницы с помощью pushstate, препятствующего работе ajax

0 голосов
/ 10 июня 2019

Я пытаюсь подделать URL страницы, используя ajax, чтобы также изменить содержимое страницы.Я также использую переходы jquery в сочетании с этим ajax, но когда я добавляю pushstate для изменения URL, он останавливает ajax от изменения содержимого страницы.

Если я закомментирую строку // window.history.pushState (null, "null", href), то переходы будут работать нормально, но тогда URL-адрес не изменится.Кто-нибудь может увидеть, что я делаю не так?

$ ("# contactRoll"). On ("щелчок", функция (событие) {

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 голосов
/ 10 июня 2019

https://developer.mozilla.org/en-US/docs/Web/API/History_API

Использование history.pushState () изменяет реферер, который используется в заголовке HTTP для объектов XMLHttpRequest, созданных после изменения состояния.Ссылка будет URL-адрес документа, окно которого это на момент создания объекта XMLHttpRequest.

Попробуйте добавить 

//fake the url
window.history.pushState(null, "null", href)

к обратному вызову success: function(data) { ... }поэтому состояние url изменяется после завершения запроса Ajax. 

$.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"})

      })
    }
  })
...