HTML-кнопка Назад

Райан Дубі
За
Інтерв'ю: Кращий маленький інтернет-компанії

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

Як HTML кнопки Назад Допомагає навігації


Одним з найбільш важливих аспектів будь-якої веб-сторінки є створення безшовних і інтуїтивно зрозумілу навігацію для ваших відвідувачів. Якщо у вас є «внутрішні» сторінок, які пов'язані з низкою інших сторінок, це може бути досить важко вгадати, де відвідувач прийшов. У випадку, коли гості прибули на сторінку з пошукової системи або інше посилання, неможливо знати. Однак за допомогою HTML-кнопки назад, ви можете надати своїм відвідувачам зручність посилання, яка повертає їх на сторінку, звідки вони прийшли. Хоча користувачі звичайно мають можливість використовувати браузер кнопку "Назад", яка буде робити те ж саме, що надає посилання на сторінці додає зручність і інтуїтивність на ваш сайт.

Програмування Назад Кнопка з HTML


Існують різні методи, доступні для створення кнопки або посилання, що буде надсилати відвідувача на попередню сторінку вони були в. Варіант ви виберете, залежить від того, як ви хотіли б отримати такий вигляд, і чи хочете ви забезпечити той факт, що деякі користувачі, можливо, не JavaScript-браузер з підтримкою.

Використання Javascript

Використовуючи метод JavaScript є одним з найпопулярніших методів багатьох нових веб-дизайнерів використовувати, тому що це так просто. Однак, якщо Ви використовуєте такий підхід, що це гарна ідея включати фактичні пов'язані сторінка для браузера, щоб піти у випадку, якщо браузер не може працювати JavaScript. У такому випадку браузер буде ігнорувати код JavaScript, але він повернеться на заслання, яку ви визначили для HREF змінної. При виборі якій сторінці перейти за посиланням, спробуйте вгадати, де користувач повинен був би виходити від вашого сайту, перш ніж прибути на цій сторінці. Якщо ви не впевнені, то ви завжди можете відправити їх на головній сторінці вашого сайту.

JavaScript: Text Link

Це перша техніка JavaScript надає користувачеві текстові посилання, який буде відправляти їх назад на одній сторінці.

<a href="yourpage.html" onclick="window.back()"> Повернутися до попередньої сторінки </>

Ви можете використовувати "history.back ()" замість "window.back ()" - дві функції працюють так само. Інший спосіб використання JavaScript, щоб відправити користувачеві назад кількості сторінок. Більшість програмістів веб відправляти відвідувача назад "-1"-сторінок, але ви можете встановити кількість сторінок, що вам подобається.

<a href="yourpage.html" onclick="history.go(-1);"> Повернутися до попередньої сторінки </>

JavaScript: Форма кнопки

Інший метод, що використовує JavaScript полягає в створенні сірих "кнопки форми", який, при натисканні на яку буде вести себе так само, як зв'язок методу, описаного в попередньому розділі. Існує ніякого реального переваги у використанні цієї техніки у зв'язку з позицією текстової посиланням. Вирішальним чинником є ​​насправді естетика - який варіант Ви хочете запропонувати своїм відвідувачам для навігації, і як ви хочете, щоб вона виглядала?

<FORM> <INPUT TYPE="button" VALUE="Previous Page" onClick="history.go(-1);"> </ FORM>

Використання скриптів Server Side

Техніка самих професійних веб-дизайнерів використовувати, щоб зробити використання Server Side Includes (SSIS), де вони можуть писати CGI код, який отримує обробляється на сам веб-сервер, що усуває необхідність для клієнта браузера, щоб запустити будь-який код JavaScript. Як це пишеться код залежить від того, як веб-сервер налаштований і те, що мова сценаріїв, який ви використовуєте. У будь-якому випадку, скрипт на стороні сервера дозволяє використовувати змінну "HTTP_REFERER".

Приклад сценарію з допомогою CGI:

<HREF ="<!--# луна мінлива = "HTTP_REFERER "-->"> Перейти на попередню сторінку </ A>

HTTP_REFERER мінлива URL, про який йдеться відвідувач поточної веб-сторінці. Якщо ваша мова сценаріїв, вибір є PHP, то для доступу до змінної Referer і посилання на попередню сторінку, ви повинні створити текстову посилання, використовуючи наступний код.

<? PHP відлуння "<a href="' $_SERVER["REFERER"]'"> Перейти на попередню сторінку </>.. ';?>

Або кнопки форми за допомогою цього коду:

<'<form Action="' $_SERVER["REFERER"]'" method="get"> <input type="submit" value="Previous Page"> </ FORM> ..' PHP відлуння;?>

Висновки

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

Див також