Подменяем предыдущую страницу в History

Итак. Дано: лента новостей. Туда попадают все новости сайта не зависимо от рубрики.
Каждая новость имеет в превью ссылку на свою рубрику.

Задача: сделать так, чтобы после перехода на новость при клике в браузере на кнопку «Назад», возврат происходил не в общую ленту, а в ленту рубрики этой новости.

Объяснил задачу как могу. Теперь решение. Решать будем через JavaScript, а конкретно через History.

Сначала определяем есть ли у нас на странице лента новостей. На сайте, о котором идет речь, лента расположена в контейнере #newsContainer. Проверять его наличие будем с помощью $(«#newsContainer»).length

Если значение 0, значит контейнер не найден. Если больше нуля, то находим ссылки превьюшки новости и ожидаем клика по ним. В моем случае ссылки две:

Первая — с картинки: #newsContainer .item .bigPicture a
Вторая из ссылки типа «Читать подробнее»: #newsContainer .item a.more

Итак. В случае клика по одной из этих ссылок нам нужно, перед тем как перейти на полную версию этой новости, нужно найти ссылку на рубрику этой новости, а затем подменить ею адрес текущей страницы в хистори браузера.

Как найти эту ссылку? Находим родителя ссылки по которой кликнули (#newsContainer .item) и ищем в нем дочерний элемент с искомой ссылкой (a.new-section-fast-link). Нашли, подменили и всё. Теперь, при возврате кнопкой «Назад» попадем в ленту категории этой новости.

Вот готовый код:

	//Изменение хистори
	if($("#newsContainer").length){
		$('#newsContainer .item .bigPicture a').on('click', function(){
			window.history.replaceState(null,document.title,$(this).parents('#newsContainer .item').find('a.new-section-fast-link').attr('href'));
		});
		$('#newsContainer .item a.more').on('click', function(){
			window.history.replaceState(null,document.title,$(this).parents('#newsContainer .item').find('a.new-section-fast-link').attr('href'));
		});
	}

Выглядит просто, не так ли?

Помогло? Зашли Админу на чай.
 

Если пригодилось, принимаю благодарности и пожертвования «на чай». На этом пока всё.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *