PHP, JS: Формирование страницы на основе якоря (#)
Видели наверное в Twitter‘е урлы вида «http://twitter.com/#!/krasnoyarcev», и именно та запись, что находится после символа «#» определяет какая информация будет загружена.
Мне понадобилась подобная система. Необходимо загружать информацию которая определяется как раз таки этим якорем (то что после #).
Для чего это нужно?
Допустим у Вас на сайте реализована навигация без перезагрузки страницы, изменять адресную строку с помощью клиентских технологий Вы не можете, ну разве что добавлять хеш в URL, используя якоря в ссылках (то, что нам нужно). А теперь Вы захотели поделиться ссылкой с Васей, копируем содержимое адресной строки (В ней присутствует якорь) и передаете Васе по любой линии связи. Вася переходит по ссылке и если Вы не предусмотрели такой вариант, то видит он совсем не то, чем Вы хотели с ним поделиться.
Техническая сторона вопроса
Чтобы информация сразу формировалась на сервере и выдавалась уже в нужном виде, необходимо, чтобы якорь передавался на сервер, а по простому сделать это средствами php не возможно. Тут даже суперглобальный массив $_SERVER[] нам ничем не поможет.
На помощь приходит JavaScript. Здесь я предпочитаю использовать библиотеку JQuery.
В Твиттере страница имеет следующий вид: панель сверху, которая грузится сразу и остальная часть страницы, которая подгружается уже после окончательной загрузки страницы. То есть перед тем как подгружать весь контент, загружается пустая страница с верхней панелью.
С помощью Аякс мы может послать запрос серверу, который вернет ту информацию, которую нужно вставить в пустое место.
Для начала набросаем главную страницу.
Файл index.php:
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Пример скрипта с http://it-guest.net.ru</title> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jscripts.js"></script> <style> #panel { text-align: center; } #space { color: #997486; text-align: center; } </style> </meta></head> <body> <div id="panel"> Тут панель </div> <div id="space"> </div> </body> </html>
Тут всё понятно, в блок с id = space будем пихать полученную с помощью JS информацию.
Определимся с форматом якоря: «#id-%id%», где %id% это номер страницы, которую нужно грузить. Напишем скрипт на JavaScript, который будет получать всю информацию после символа #, отправлять файлу get.php post-запрос в виде id и возвращать соответствующую этому id информацию.
Файл jscripts.js:
$(document).ready(function(){ var r = /#id-([0-9]{1,9})/i // регулярное выращение проверяющее правильность якоря var t = r.exec(window.location.hash); // выполняем рег. выражение для хеша (то, что после символа # включая его) if(t[1]!=0 && t[1] != ''){ // проверяем вернуло ли регулярное выражение id $.post("get.php", {"id": t[1]},function(data){ // посылаем обработчику get.php id $("#space").html(data); // заполняем блок текстом, который вернул обработчик }); } })
Файл get.php:
< ?php header('Content-type: text/html; charset=utf-8'); switch($_POST['id']) { case 1: echo 'Страница №1'; break; case 2: echo 'Страница №2'; break; case 3: echo 'Страница №3'; break; case 4: echo 'Страница №4'; break; } ?>
круто
я в свич еще добавил дефолтное действие, например заголовок 404
P.S. В Хроме кнопка сохранить с бордером
Ответить