Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
PHP Поиск
- внедрение 1С по оптимальной цене и срокам возможно?
Навигация на AJAX-сайте
При загрузке страниц по технологии Ajax возникает проблема, заключающаяся в том, что адрес реально загруженной страницы не соответствует адресу, указанному в адресной строке браузера. Таким образом если пользователь захочет добавить страницу в закладки, он добавит совершенно не ту страницу, которую собирался, т.е. добавлена будет первая страница сайта, через которую пользователь вошел на сайт. Кроме этого кнопки навигации вперед и назад работать не будут, т.к. браузер понятия не имеет о том, когда вы поменяли содержимое страницы.
Для решения этой задачи нужно фиксировать события, выполняемые JavaScript`ом, в истории браузера.
Разделим задачу на две подзадачи:
а. Кнопки Back и Forward должны работать как положено.
б. Пользователи должны иметь ссылку на текущую страницу, вне зависимости от того, сколько переходов по сайту было совершено. Если пользователь зашел на страницу А и перешел на страницу Б, он должен иметь ссылку на текущую страницу Б.
Для начала решим вторую задачу:
Просто в лоб менять url в браузере не получится - произойдет переход. Обойти это не получится. Единственная часть URL, которая может быть изменена без перехода - это якорь. При каждом переходе будем менять якорь страницы.
Т.е. если человек находится на странице /about/ и переходит на /shop/, то url должен стать примерно таким: /about/#url=/shop/. Теперь пользователь может копировать ссылку из адресной строки и посылать ее друзьям.
В заголовок страницы (страниц) добавляем JS, который проверяет URL загружаемой страницы и, если в ней есть наш якорь, то осуществляем редирект на нее. Выглядит это примерно так:
<script type="text/javascript">
<!--
if(document.location.hash && document.location.hash.indexOf('url=') > -1)
document.location = new String(document.location.hash).replace('#url=','');
-->
</script>
При этом код должен быть в заголовке страницы (между
и ) и не должен выноситься в .js-файл - тогда переход будет осуществляться до того как начнется прорисовка страницы.Теперь пользователь, открывая в браузере страницу /about/#url=/shop/ будет перебрасываться на /shop/, т.е. задача б решена.
Теперь займемся основной задачей.
Основная сложность заключается в том, что браузеры по разному отрабатывают движение по history. Если FireFox и Opera воспринимают изменение якоря как отдельное событие в history, то IE их в упор не замечает. Также прибавляет хлопот практически не управляемый объект history.
FireFox и Opera:
При нажатии на Back / Forvard в адресной строке либо меняется якорь либо осуществляется переход на прошлую страницу. Если переход, то никаких действий не требуется, если же меняется якорь, нужно это изменение отловить и переправить посетителя на нужную страницу.
В JS создаем глобальную переменную, в которую при открытии страницы и каждом ajax-переходе пишем текущий url (с якорем).
Добавляем таймер (setInterval(...)), который через каждую секунду проверяет соответствие этой переменной фактическому URL в браузере. Если не соответствует, осуществляем переход на тот, что указан в браузере.
Internet Explorer:
При нажатии Back/Forward происходит переход на предыдущую страницу, все изменения якоря игнорируются. Нам нужно заставить IE отработать все изменения якоря как отдельные переходы. Для этого:
В JS (или в PHP - не суть) проверяем браузер пользователя и, если это IE, добавляем скрытый IFRAME.
В папку /myajax/ кладем .htaccess, который перенаправляет все запросы несуществующих страниц на файл-обработчик. .htaccess должен содержать примерно следующее:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule (.*) index.php?qs=$1 [QSA]
Если mod_rewrite или .htaccess не доступны, можно реализовать аналогичную логику при помощи страницы 404.
При загрузке страницы, а также при каждом ajax-переходе в iframe загружаем URL вида: /myajax/наш_урл (т. е при переходе пользователя на страницу /about/ будет /myajax/about/). Это позволяет нам фиксировать переходы для IE. Кроме того, при нажатии Back переход осуществится не в основном документе, а в iframe. В файле /myajax/index.php нам нужно создать JS-код, который при загрузке страницы будет проверять, соответствует ли его URL (за исключением /myajax/) тому что загружено в основном окне браузера. Если нет - осуществить переход. Реализация может выглядеть примерно так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<script language="JavaScript" type="text/javascript">
<!--
function historyGo() {
if(window.parent) {
var parentUrl = '';
var newUrl = '< ?=str_replace("/myajax/", "", $_SERVER["REQUEST_URI"]);?>';
var parentLoc = window.parent.location;
if(parentLoc.hash && parentLoc.hash.indexOf('url=')>-1) {
var sss = new String(parentLoc);
parentUrl = new String(sss.substr(sss.indexOf('url=')+4));
}else {
parentUrl = new String(parentLoc.href.replace('http://'+parentLoc.hostname, ''));
}
parentUrl = parentUrl.replace('/myajax/', '');
if(parentUrl != newUrl) {
if(window.parent.document.changePage) {
window.parent.document.changePage(newUrl);
}else
window.parent.location.href = newUrl;
}
}
}
//-->
</script>
</head><body onload="historyGo()"> </body></html>
Основные задачи решены. Остались нерешенными переходы по отправке форм и в сложных фреймовых структурах.
.
Прокомментировать/Отблагодарить
Популярное:
- Анализ сайта
- Проверка email
- Чей IP-адрес?
- Чей домен?
- Где телефон?
- Генератор Sitemap
- Примеры Ajax
- Примеры PHP
- Примеры Javascript
- Примеры HTML, CSS
- Бесплатные прокси
- GEO-сервисы
- Сайт в ТОП (SEO)
- Полезные ссылки
- Генератор Robots.txt
Содержание:
- HTML
- Что такое HTML
- <!DOCTYPE>
- Мета теги в <head>
- Тег <base>
- Текст в html
- HTML списки
- Ссылки
- Картинки на сайте
- Таблицы
- Фреймы
- Формы
- DHTML
- Музыка
- Видео
- Карты изображений
- SVG карты
- Графика в HTML
- SSI .shtml
- Таблица цветов RGB
- Правильное
сочетание цветов - Таблица
«безопасных»
цветов - Таблица символов
- Примеры HTML, CSS
- CSS
- JavaScript
- PHP + MySQL
- Введение в PHP
- Основы языка
- Использование
массивов - $_server
- Создание функций
- Строки
- Функции работы
со строками - Объектное
программирование - Формы
- Файлы
- Загрузка файлов
на сервер - MySQL
- Cookie
- htaccess
- Безопасность
- Сессии
- Отправка почты
- Кэширование
- Дата, время
- Математические
функции - Дополнительные
возможности - Регулярные
выражения - Библиотека Curl
- IMAP, POP3, NNTP
- Оптимизация
- Примеры скриптов
- XML + XSLT
- AJAX
- Графика CorelDRAW
- SEO
- Сервисы
- Разное
- Движки сайтов (CMS)
- Регистрация
доменов и хостинг - Заработок для
web-мастеров - Хостинг
- Настройка DNS
- ADSL
- RSS
- ActiveX и HTML
- Паролирование
страницы - HTTP коды
- HTTP протокол
- HTTP заголовки
- Прячем ссылки
- ☠ Черный список
сайтов - ☭ Заработок
в интернете - Термины и
определения - Продажа доменов
- ✉ Настройки
Яндекс-почты - Кнопки социалок
- ☎ Настроки SIP
в телефоне - Создание
поискового плугина - Сервис
коротких ссылок - Telegram: бот, ссылки
- Шаблоны сайтов
- Друзья
- Задания к л/р
- Примеры
зачетных задач
- Статьи, обзоры
- Новости