Javascript fetch, получая неопределенный URL на window.popstate - PullRequest
Новая
       36

Javascript fetch, получая неопределенный URL на window.popstate

0 голосов
/ 26 мая 2020

Я пытаюсь получить контент со страницы php. У меня есть вызов fetch + запуск history.pushState при щелчке, оба работают нормально, но window.popstate возвращает ошибку при возврате, нажав кнопку возврата браузера. Ошибка в том, что window.popstate не знает, какой URL-адрес получить при возврате.

К сожалению, я не могу понять, как передать правильную переменную url в window.popstate . 

        // the code stripped fetch function
        var load = function(url){
            fetch(url, {
                method: "GET"
            }).then(function(response) {
                    response.text().then(function(text) {

                        // parsing and temporary placing fetched content into a fragment
                        var content = new DOMParser().parseFromString(text, "text/html"),
                        bodyPart = content.querySelector('main'),
                        fragmentElement = document.createDocumentFragment(),
                        tempElement = fragmentElement.appendChild(bodyPart);

                        // replacing the current content with the fragment
                        document.body.replaceChild(tempElement, document.querySelector('main')); 

                        // need to assign the fetch on click function again, otherwise it won't work on the dynamically added (the fetched) links
                        clickOnPJAXLink();

                    });
                });
            }

            // the click function if clicking on any link function to start fetching content
            var clickOnPJAXLink = function(url) {
                document.querySelectorAll('A').forEach(a => {
                    a.addEventListener('click', (e) => {
                        e.preventDefault();
                        var url = e.currentTarget.getAttribute("href");
                        load(url);                          
                        history.pushState(url, "sometitle", url);
                    });
                });
            }

            // load the function initially on the home page
            clickOnPJAXLink();

            // popstate for back button
            window.addEventListener('popstate', function (e) {
                var state = e.state;
                if (state !== null) {
                    load(url);
                    console.log(url)
                }
            });

window.popstate возвращает ошибку, что var url не определен и, таким образом, конечно, не может получить предыдущее (предыдущее) содержимое.

Большое спасибо за любые советы!

1 Ответ

0 голосов
/ 29 мая 2020

history.pushState принимает в качестве первого параметра объект данных, а не строку - попробуйте history.pushState ({url: e.currentTarget.getAttribute ("href")}, тогда e.state.url будет соответствовать желаемому URL-адресу для загрузки.

...