Есть код, который использует jq. Не хотелось бы загружать библиотеку , только из-за нескольких строк кода.
Помогите преобразовать код в чистый js.
$('document').ready(function(){
$('.historyAPI').on('click', function(e){
// отменяем стандартное действие при клике
e.preventDefault();
// Получаем адрес страницы
var href = $(this).attr('href');
// Передаем адрес страницы в функцию
getContent(href, true);
});
});
// Добавляем обработчик события popstate, происходящего при нажатии на кнопку назад/вперед в браузере
window.addEventListener("popstate", function(e) {
// Передаем текущий URL
getContent(location.pathname, false);
});
// Функция загрузки контента
function getContent(url, addEntry) {
$.get(url).done(function(data) {
// Обновление только текстового содержимого в блоке
$('#content').html($(data).find("#content").html());
$('#content2').html($(data).find("#content2").html());
// Если был выполнен клик в меню - добавляем запись в стек истории сеанса
// Если была нажата кнопка назад/вперед, добавлять записи в историю не надо
if(addEntry == true) {
// Добавляем запись в историю, используя pushState
history.pushState(null, null, url);
}
});
}
Пока что получилось вот так:
document.addEventListener('DOMContentLoaded',function(){
[].forEach.call( document.getElementsByClassName('historyAPI'), function(e) {
// отменяем стандартное действие при клике
e.preventDefault();
// Получаем адрес страницы
var href = $(this).attr('href');
// Передаем адрес страницы в функцию
getContent(href, true);
});
// Добавляем обработчик события popstate, происходящего при нажатии на кнопку назад/вперед в браузере
window.addEventListener("popstate", function(e) {
// Передаем текущий URL
getContent(location.pathname, false);
});
// Функция загрузки контента
function getContent(url, addEntry) {
$.get(url).done(function(data) {
// Обновление только текстового содержимого в сером блоке
$('#content').html($(data).find("#content").html());
$('#content2').html($(data).find("#content2").html());
// Если был выполнен клик в меню - добавляем запись в стек истории сеанса
// Если была нажата кнопка назад/вперед, добавлять записи в историю не надо
if(addEntry == true) {
// Добавляем запись в историю, используя pushState
history.pushState(null, null, url);
}
});
}
Ответ
$('.historyAPI').on('click', function(e){
Лучше всё это заменить на обработку всплытия клика:
document.addEventListener('click', function (e) {
var a = e.target.closest("a.historyAPI");
a && getContent(a.href, true);
});
$.get(url).done(function(data) {
// Обновление только текстового содержимого в сером блоке
$('#content').html($(data).find("#content").html());
$('#content2').html($(data).find("#content2").html());
Приблизительно так:
fetch("url").then(function (resp) {
return resp.text();
}).then(function (data) {
var doc = (new DOMParser).parseFromString(data, "text/html");
for (var id of ["content", "content2"]) {
var dest = document.getElementById(id);
var elem = doc.getElementById(id);
if (elem) {
dest.parentElement.replaceChild(elem, dest);
} else {
dest.textContent = "";
}
}
Комментариев нет:
Отправить комментарий