Есть код, который использует 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);
}
});
}
$() - в контексте получения массива элементов и .find() можно заменить на querySelectorAll();attr() - меняется на attributes;$.get - на fetch() (ссылка на английском);Естественно будет это все работать только если вы ориентируетесь на относительно новые браузеры
[].forEach.call( document.getElementsByClassName('historyAPI'), function(e) {
[].forEach.call(document.querySelectorAll('.historyAPI'), function(e) {
var href = $(this).attr('href');
var href = this.href;
$.get(url).done(function(data) {
// Обновление только текстового содержимого в сером блоке
$('#content').html($(data).find("#content").html());
$('#content2').html($(data).find("#content2").html());
Приблизительно так:
fetch("url").then(resp => {
return resp.text()
}).then(data => {
var doc = (new DOMParser).parseFromString(data, "text/html");
for (var id of ["content", "content2"]) {
var dest = document.getElementById(id);
dest.textConetent = '';
dest.appendChild(doc.getElementById(id))
}
Сборка персонального компьютера от Artline: умный выбор для современных пользователей