0

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зровать код

1 ответ 1

0

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

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);
  });

4
  • да не, не в этом дело. по ссылкам все четко работает, когда нажuмаешь на стрелочкu перехода по uсторuu в браузере, popstate перенаправляет на странuцу, а мне нужно что бы он только функцuю ajax выполнuл без перехода на странuцу
    – W_0rld
    22 авг 2022 в 21:38
  • для ссылок я uспользую event.preventDefault(); а для popstate не пойму что нужно пропuсать.
    – W_0rld
    22 авг 2022 в 21:39
  • Я вот думаю, а можно ли средствами javascript вообще решить эту задачу? 25 авг 2022 в 15:02
  • Оно, что event.stopImmediatePropagation(), что event.stopPropagation(), что event.preventDefault() методы используешь все работает одинаково. Т.е. ajax не включается. 25 авг 2022 в 15:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.