Обработка браузера назад / вперед для страниц, загруженных с использованием AJAX - PullRequest
Новая
       82

Обработка браузера назад / вперед для страниц, загруженных с использованием AJAX

0 голосов
/ 20 января 2020

Я использую AJAX, чтобы загрузить содержимое div в другой div на другой странице. После этого я манипулирую историей и меняю URL, используя HTML5 History Api, как указано в http://diveintohtml5.info/history.html.

Теперь проблема возникает, когда кто-то нажимает кнопку браузера назад / вперед. Мне нужно снова загрузить содержимое требуемого div на целевой div. Но вместо содержимого требуемого элемента div отображается все содержимое той страницы, которой принадлежит требуемый элемент div. Снова при нажатии кнопки «Назад / Вперед» в браузере, затем, если какая-либо страница содержит значения, добавленные в URL, такие значения в URL не передаются на требуемую страницу.

Вот код, который я использую для загрузить содержимое div в другой div другой страницы и манипулировать историей и изменить URL-адрес 

     function next(type,page)
     {

       var strURL = "next.php?type="+type+"&pn="+page;
       $("#div1").load(strURL+" #div2");
       history.pushState(null,null,strURL);// to change URL and history
    }

Теперь для управления назад / вперед нажимает кнопку браузера 

    function navigate(href) {
        var req = new XMLHttpRequest();
        req.open("GET", "http://localhost/"+href.split("/").pop(),false);
        req.send(null);
        if (req.status == 200) {
            document.getElementById("div1").innerHTML = req.responseText;
            return true;
          }
        return false;
      }

     window.addEventListener("popstate", function(e) {
     navigate(location.pathname);});
     }

Не могли бы вы, пожалуйста помогите мне, поскольку я не могу решить это. Большое спасибо всем заранее.

1 Ответ

0 голосов
/ 21 января 2020

После некоторых трюков я наконец решил свой вопрос.

Вот ответ на мой вопрос- 

    function navigate(href) {
    var req = new XMLHttpRequest();
    req.open("GET", "http://localhost/"+href.split("/").pop(),false);
    req.send(null);
    if (req.status == 200) {
        document.getElementById("div1").innerHTML = req.responseText;
        $("#div").load(" #div").hide().fadeIn(1000); //changes done here
        return true;
      }
     return false;
    }

    window.addEventListener("popstate", function(e) {
    navigate(location.pathname);});
    e.preventDefault(); //changes done 
    }
...