Як зробити кнопку назад на веб-сторінці. Створюємо кнопку "повернутись назад" Більш універсальний спосіб

У цій статті ми розглянемо, яким способом можна створити кнопку "Повернутись назад" у будь-якому потрібному для вас місці. Думаю із самої назви кнопки вже зрозуміло, що відбуватиметься при натисканні на неї. Таку кнопку можна вставити як у категорію, так і в сам матеріал. Робиться все досить просто.

Є кілька варіантів, як можна додати кнопку, але я особисто використав лише один спосіб. А саме третій варіант із запропонованих мною трьох. Трохи далі розповім чому саме він.

Які взагалі є у нас варіанти:

Плюс у третьому варіанті в тому, що якщо треба буде відредагувати текст на кнопці або змінити/додати клас стилю, то потрібно буде виправити сам модуль, а не виправляти кнопку у всіх місцях, де вона стоїть.

Так ось, на одному зі своїх сайтах я і використав третій варіант:

Був створений модуль HTML-код і туди за допомогою розширення "Sourcerer", яке дає можливість додавати будь-який код в матеріал, був вставлений код кнопки.

Мій робочий код кнопки:

Повернутися назад

Текст трохи прикрашений стрілкою за допомогою компонентів з bootstrap 3, а самій кнопці задані стилі через CSS.

Іноді на веб-сторінках виникає необхідність тимчасово перейти на будь-яку іншу (назвемо її допоміжну) сторінку, а потім повернутися назад та продовжити роботу з нею. Наприклад, це може бути сторінка довідки, реєстрації.

При цьому, очевидно, зворотна адреса може бути різною. Як реалізувати такий зворотний перехід на сайті? Чистих html/CSS тут не вистачить, потрібно буде використовувати JavaScript.

Найпростіше – це, наприклад, використання такого рядка у скрипті на допоміжній сторінці:

Метод history запам'ятовує історію переходів на сторінці і, по суті, його використання аналогічне до використання кнопок браузера «Вперед» і «Назад», лише дещо функціональніше. Це – найпростіший та зручний спосібале тільки за однієї умови: якщо нова (допоміжна) сторінка не буде відкрита в новому вікні. Адже інакше допоміжна сторінка відкриватиметься вперше (точніше, сеанс для неї буде перший, переходів на ній ще не було). А це означає, що переходити назад, насправді, нікуди. Тому даний спосібне можна назвати універсальним. Він не спрацює, якщо користувач примусово відкриє сторінку в новій вкладці або за нього зробить це браузер відповідно до налаштувань. У такому разі атрибут посилання target=”_self” не допоможе: з відкритої допоміжної сторінки неможливо буде перейти назад (якщо, звичайно, не ввести URL вихідної сторінки в адресному рядку браузера вручну).

Для його реалізації знадобляться скрипти як на вихідній, так і допоміжній сторінках. Ідея може бути різною. Одна з них полягає в тому, що адреса (URL) вихідної сторінки зберігається в адресному рядку браузера як GET-запиту. Тим самим. допоміжна сторінка, отримуючи такий запит, знає про його джерело. Грунтуючись у цьому, з'являється можливість переходу назад, тобто. на ту сторінку, з якої було здійснено перехід.

Схематично це можна уявити так:

На сторінці, З ЯКОЮ повинен здійснюватися перехід, знаходиться наступний скрипт, що є функцією – обробник кліку миші (onclick):

function save_back(url) (

var docum_href = document.location.toString().substring(docum_protocol.length+2);
if(docum_href.substring(0,1) == "/") (
docum_href = docum_href.substring(1);
}
var href = window.location.protocol+"//"+document.location.hostname + url + "?"+docum_href;
window.open(href);
}

Для того, щоб функція в скрипті спрацювала, необхідно встановити її обробник на якийсь елемент одним із способів, наприклад, так:

Натисніть, щоб перейти на додаткову сторінку

Зверніть увагу, що атрибут href цього посилання має відповідну адресу, яка вказана у функції-обробнику події onclick. Це зроблено для того, щоб пошукові роботи розуміли, на яку сторінку відбуватиметься перехід при натисканні на посилання. Якщо це не потрібно, тоді слід зробити порожній атрибут href, виду

Принцип роботи цього скрипта у тому, що з виклику функції save_back(url) відбувається відкриття (допоміжної) сторінки, має адресу url. Для цього визначається протокол сторінки (наприклад, http або https), а також решта URL вихідної вебсторінки, у тому числі з, можливо, наявними даними GET-запиту (це те, що знаходиться в URL після знака «?»). Отримані дані додаються до URL сторінки, що відкривається – і відбувається перехід на неї.

На ній має бути приблизно такий скрипт:

var docum_protocol = document.location.protocol;
var number_questions = docum_location.length-1;

var question = "";
if(number_questions > 1)(
question = "?";
}
document.location = docum_protocol+"//"+ docum_href + question + get;
}

Цей скрипт також буде запускатися при натисканні мишею на якийсь елемент, на який встановлений відповідний оброблювач:

Повернутись

Цей рядок скасовує дію при натисканні мишею на посилання за замовчуванням. Справа в тому, що за умовчанням відбувається перехід за посиланням. При цьому перехід відбуватиметься саме на ту адресу, яка вказана в атрибуті href. Ця адреса (зокрема, на допоміжній сторінці) може не містити зворотної адреси сторінки, з якої було здійснено перехід (якщо перехід на допоміжну сторінку можливий не з однієї певної, а з декількох вихідних сторінок).

Отже, скрипт на допоміжній сторінці читає вміст адресного рядка і потім розбиває його масив за елементами «?». Зауважимо, що в URL можуть бути два такі символи. Перший з'явиться, як уже було сказано, внаслідок того, що до адреси допоміжної сторінки було додано адресу (за вирахуванням протоколу) адресу вихідної сторінки. А другий міг бути присутнім, як результат наявності параметрів GET-запиту при завантаженні вихідної сторінки. Іншими словами, в адресному рядку допоміжної сторінки може бути один або два питання. Для переходу з допоміжної сторінки на вихідну при натисканні на посилання

Повернутись

з адресного рядка зчитується запит і перетворюється на такий вид, який він мав на вихідній сторінці, після чого відбувається завантаження сторінки за цією адресою.

Крім того, слід зазначити, що у статті, по суті, йдеться не про повернення на вихідну сторінку, а про повторне її завантаження. Це, звісно, ​​лише імітація повернення. Зокрема, дані, введені на цій сторінці, можуть не зберігатися. Крім того, на відміну від ПОВЕРНЕННЯ, при завантаженні сторінки вона буде відкрита з самого початку сайту (тобто верхня її частина буде розташована вгорі екрана). Тоді як «справжнє» повернення назад повертає (вихідну) сторінку саме в тому місці, з якого було зроблено перехід. Тому спробуємо скомбінувати обидва способи.

Отже, поставимо завдання:

якщо допоміжна сторінка відкривається в тій же вкладці (вікні), то нехай буде доступний метод history.back();

а от якщо допоміжна сторінка відкривається в новому вікні, то повинен працювати метод, що обговорювався вище (бо при цьому history.back() не спрацює).

Скрипт на допоміжній сторінці трохи зміниться (додасться згаданий вище рядок):

function return_to_initial_page() (
history.back();
var docum_location = document.location.toString().split("?");
var docum_href = docum_location;
var docum_protocol = document.location.protocol;
var number_questions = docum_location.length – 1;
var get = docum_location;
var question = "";
if (number_questions > 1) (
question = "?";
}
document.location = docum_protocol + "//" + docum_href + question + get;
}

Спочатку намагаємося повернутись назад. Якщо вийде - частина скрипту, що залишилася, не спрацює і відбудеться повернення на вихідну сторінку в те ж саме місце, звідки був здійснений перехід. Якщо ні – тоді, як і раніше, із параметрів GET-запиту вилучаємо адресу вихідної сторінки та переходимо на неї.

Звичайно, у цій статті показано лише один із варіантів технології «повернення» НАЗАД – на вихідну сторінку. Для цієї мети, крім GET-запиту, можна було б використовувати інші технології, наприклад локальне сховище localStorage . Крім того, для повної імітації повернення НАЗАД непогано було б через GET-запит передавати і величину прокручування вихідної сторінки - щоб потім, навіть при відкритті допоміжної сторінки в новому вікні - повернутися в те саме місце вихідної сторінки, звідки був раніше зроблений перехід.

Доброго дня, виникло питання як перенести кнопку назад і поставити її поряд з кнопкою далі при оформленні замовлення. У мене зараз це виглядає так. ..

Є рішення

Вітаю, хто підкаже, як можна зробити кнопку назад, наприклад у кошику, щоб людина могла повернутися на попередню сторінку?

Встромити в шаблон де хочете кнопку, наприклад, ось це

+1

Коли натискаю кнопку назад на браузері у мене начебто злітають усі стилі доки не оновлю сторінкуТема default має показувати як на скрині нижче)

Здрастуйте, зробив кнопку "Повернутись назад" у кошику, навіть не кнопку, а просто посилання з кодомПовернутись назадТепер при поверненні назад у кошику...

Є рішення

Доброго дня!Зіткнувся з такою проблемою: при додаванні товару в кошик та натисканні в браузері кнопки "назад", інформація про товари в кошику (у додатковому блоці) не зберігається, доки не оновиш сторінку. Тобто. заходимо на сайт, переходимо...

На сайті, який ви вказали використовується плагін для кошика.Як варіант з доопрацюваннями, можна використовувати відправку додавання товарів не на?html=1, а на?html=1&items=1 це у відповідь дасть повністю вміст кошика.

Доброго дня. При кожному кроці під час оформлення замовлення вказується кнопка "Далі". У темі "Suprime" код кнопки я знайшов: