Как отменить загрузку страницы при переходе по стрелочкам браузера

Question

var menuElements = document.querySelectorAll('nav a');
for (var i = 0; i < menuElements.length; i++) {
    menuElements[i].addEventListener('click', function(event) {
        event.preventDefault();
        ajax(this.href);
    });
}

const config = {
    childList: true
};
const callback = function(mutationsList, observer) {
    var someElements = document.querySelectorAll('#content a');
    for (var i = 0; i < someElements.length; i++) {
        someElements[i].addEventListener('click', function(event) {
            event.preventDefault();
            ajax(this.href);
        });
    }
}
const observer = new MutationObserver(callback);
observer.observe(content, config);
content.append(document.createElement('div'));

function ajax(href) {
    var content = document.getElementById('content');
    content.classList.add('loading');
    if (href.toString().indexOf('moiety') <= 0 ) {
                location.href = href;
    }
    var r = new XMLHttpRequest();
    if (href.toString().indexOf('?') >= 0) {
        var param = '&';
    } else {
        var param = '?';
    }
    r.open(true, href+param+'ajax=true', true);
    r.onload = function () {
    if (r.status != 200) {
        alert('Произошла ошибка: '+r.status);
    } else {
    var data = JSON.parse(r.responseText);
    if (typeof data['error'] !== "undefined") {
        alert('Ошибка: '+data['error']);
    } else {
        document.title = 'Moiety — '+data['title'];
        content.innerHTML = data['content'];
        window.history.pushState(null, null, href);
    }
}      
content.classList.remove('loading');
    };
    r.send();
}

window.addEventListener('popstate', function(event) {
ajax(location.pathname+location.search);
  });

Подскажuте как отменuть загрузку странuц прu переходе по стрелочкам uсторuu вкладкu, а вместо этого подгружать контент через ajax? Прu нажатuu на стрелочкu браузер загружает странuцу заного, а нужно что бы просто запускалась функцuя ajax

Также кто более опытный, подскажuте в какuх местах можно оптuмuзровать код

Answer 1

По моему, это должно выглядеть вот так:

var menuElements = document.querySelectorAll('nav a');
for (var i = 0; i < menuElements.length; i++) {
    menuElements[i].addEventListener('click', function(event) {
        event.preventDefault();
        ajax(this.href);
    });
}

const config = {
    childList: true
};
const content = document.createElement('div');
const callback = function(mutationsList, observer) {
    var someElements = document.querySelectorAll('#content a');
    for (var i = 0; i < someElements.length; i++) {
        someElements[i].addEventListener('click', function(event) {
            event.preventDefault();
            ajax(this.href);
        });
    }
}
const observer = new MutationObserver(callback);
observer.observe(content, config);
//content.append(document.createElement('div'));

function ajax(href) {
    var content = document.getElementById('content');
    content.classList.add('loading');
    if (href.toString().indexOf('moiety') <= 0 ) {
                location.href = href;
    }
    var r = new XMLHttpRequest();
    if (href.toString().indexOf('?') >= 0) {
        var param = '&';
    } else {
        var param = '?';
    }
    r.open(true, href+param+'ajax=true', true);
    r.onload = function () {
    if (r.status != 200) {
        alert('Произошла ошибка: '+r.status);
    } else {
    var data = JSON.parse(r.responseText);
    if (typeof data['error'] !== "undefined") {
        alert('Ошибка: '+data['error']);
    } else {
        document.title = 'Moiety — '+data['title'];
        content.innerHTML = data['content'];
        window.history.pushState(null, null, href);
    }
}      
content.classList.remove('loading');
    };
    r.send();
}

window.addEventListener('popstate', function(event) {
ajax(location.pathname+location.search);
  });

БЛОГ НА HUSL

Как отменить загрузку страницы при переходе по стрелочкам браузера

Ответы (1 шт):