IwanQ
@IwanQ
Плохие времена часто дают прекрасные возможности

Ajax меню своими руками?

Здравствуйте.

Первый раз делаю сайт на ajax, написал скрипт и хотел задать пару вопросов.

function load(url){
	const xhr = new XMLHttpRequest();
	xhr.onreadystatechange = ()=>{
			if (xhr.readyState == XMLHttpRequest.DONE){
				 if (xhr.status == 200) {
						 document.body.innerHTML = xhr.responseText;
						 history.pushState('', '', url);
				 }
				 else if (xhr.status === 400) {
						alert('There was an error 400');
				 }
			}
	};

	xhr.open('GET', url, true);
	xhr.send();
}


2 вопроса:

1. Представим страницу index, about. На обоих есть ссылки href="about.html" и href="/" соответственно.
Если я находясь на странице index нажму ссылку, окажусь на about, но если нажму опять ссылку, уже произойдет перезагрузка, хотя у всех ссылок preventdefaul и в конце каждой страницы подгружается файл со скриптом.

2. Я не нашел способа как реализовать стрелки назад и вперед. На данный момент мой эталон этот сайт. Я не хочу делать хэш (#) в ссылках. Подскажите пожалуйста, как можно реализовать переходы именно по кнопкам браузера, как реализовать на странице я знаю (history back. forward).

Подскажите пожалуйста, как решить проблему, которую я описал в первом вопросе и во втором, где проблема с переходом используя браузерные кнопки.

Заранее огромное спасибо!
  • Вопрос задан
  • 88 просмотров
Решения вопроса 1
hzzzzl
@hzzzzl
короче лол набросал фиддл, но он работает в iframe, и там нет доступа к pushState

именно этот сайт на vue.js, там уже встроенный так называемый "роутер", который делает именно то что надо, тут можно вкратце ознакомиться
https://router.vuejs.org/ru/

вот фиддл, только он не работает :D

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы