www.kaminskiy-web.com | contact@kaminskiy-web.com
Статьи для веб-мастера - Kaminskiy-web

Главная страницаОбо мнеКонтактная информация
Статьи HTML и CSS JavaScript PHP и MySQL Раскрутка сайтов Хостинг Рейтинг украинского хостинга Анекдоты Анекдотов стрит

Добавить в избранное для всех браузеров

Автор статьи: Сергей Каминский

С каждым днем увеличивается количество вебмастеров, которые стремятся делать свои сайты одинаково удобными для пользователей всех браузеров, а не затачивают их только под Internet Explorer, как это было раньше. Наверное больше всего пользователи альтернативных браузеров не любят ссылку "Добавить в Избранное", которая встречается на каждом сайте, а работает только в Internet Explorer. Сейчас я расскажу как правильно реализовать на своем сайте данную функцию, чтобы она работала во всех распространенных браузерах.

Так как пользователю может понадобиться добавить в Избранное не только сайт (главную страницу), но и страницу на которой он находится, то мы подробно рассмотрим оба варианта, а вы сами решите какой из них использовать.

Добавить в Избранное главную страницу сайта

Давайте сначала рассмотрим чем отличается ссылка "Добавить в Избранное" для Internet Explorer от ее аналога в других браузерах, а потом обьединим их в одну. В IE используется функция window.external.AddFavorite(), которая принимает два значения: адрес страницы для добавления в закладки и ее название:

<a href="javascript:void(0);" 
onclick="window.external.AddFavorite('http://www.kaminskiy-web.com/', 
'Статьи по созданию сайтов'); return false;">Добавить сайт в Избранное</a>

Думаю обьяснять здесь ничего не нужно. А вот следующий пример мы рассмотрим подробнее. Код для добавления в Избранное для Opera, Firefox и Netscape выглядит следующим образом:

<a title="Статьи по созданию сайтов" href="http://www.kaminskiy-web.com" 
rel="sidebar">Добавить сайт в Избранное</a>

Как видите это обычная ссылка с наличием дополнительного параметра rel="sidebar" который как раз и указывает браузеру на необходимость добавить сайт в закладки при клике на ссылке. Кроме этого в параметре title="" нужно указать с каким именем добавлять сайт в закладки. А вот адрес страницы, которая добавляется, прописывается в href="". Обычно указывается главная страница сайта и его название.

Добавляем новую закладку
Окошко, которое появляется при нажатии на ссылку

Теперь нам нужно сделать так, чтобы ссылка "Добавить в избранное" работала одинаково хорошо во всех браузерах. Так как код для IE работает только в нем, а параметр rel="sidebar" поддерживают только Opera, Firefox и Netscape, то ничто не мешает нам просто обьединить оба варианта в одну ссылку:

<a title="Статьи по созданию сайтов" href="http://www.kaminskiy-web.com" 
onclick="window.external.AddFavorite('http://www.kaminskiy-web.com', 
'Статьи по созданию сайтов'); return false;" 
rel="sidebar">Добавить сайт в Избранное</a>

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

Добавить в Избранное текущую страницу

Итак, давайте снова начнем с Internet Explorer:

<a href="javascript:void(0);" 
onclick="window.external.AddFavorite(location.href, document.title); 
return false;">Добавить текущую страницу в Избранное</a>

Как видите в коде ничего не изменилось, кроме входящих параметров функции window.external.AddFavorite(). В JavaScript-параметре document.title содержится название страницы, которое берется браузером из указанного нами заголовка документа, расположенного между тэгами <head><title>Название страницы</title></head>. Адрес текущей страницы браузер получает из адресной строки и присваивает его параметру location.href. Таким образом нет необходимости изменять вручную на каждой странице нужные нам параметры.

Новая закладка в Internet Explorer
Новая закладка в Interet Explorer

С браузерами Opera, Firefox и Netscape все немного сложнее. Нам придется написать небольшую JavaScript-функцию, которая будет работать примерно также как и уже известная нам функция в Internet Explorer. Мы поместим ее внутри ссылки, так что она будет занимать всего лишь одну строку, но для более легкого восприятия я ее немного отформатировал:

<a href="javascript:void(0);" onclick="
var url=window.document.location; 
var title=window.document.title; 
function bookmark(a) {
    a.href = url; 
    a.rel = 'sidebar'; 
    a.title = title; 
    return true;
} 
return bookmark(this); return false;">Добавить текущую страницу в Избранное</a>

В самом начале мы присвоили переменным url и title значения JavaScript-параметров window.document.location (адрес страницы) и window.document.title (название страницы). Далее мы создаем функцию bookmark(). С ее помощью мы из нескольких переменных, значением которых является адрес и название страницы, генерируем ссылку. Не забываем также о параметре rel="sidebar", который так же будет сгенерирован с помощью bookmark().

Теперь нам осталось обьединить код для Internet Explorer и других браузеров, чтобы получить одну кросбраузерную ссылку:

<a href="javascript:void(0);" onclick="
var url=window.document.location; 
var title=window.document.title; 
function bookmark(a) {
    a.href = url; 
    a.rel = 'sidebar'; 
    a.title = title; 
    return true;
} 
bookmark(this); 
window.external.AddFavorite(location.href,document.title); return false;"
>Добавить текущую страницу в Избранное</a>

У нас уже имеется функция, совместимая с основными браузерами. Теперь нам нужно как то совместить ее с пользователями.

Ломаем стереотипы

Так как многие пользователи альтернативных браузеров уже привыкли к тому что ссылка "Добавить в Избранное" работает только в Internet Explorer и не обращают на нее внимания, то нам нужно как то ненавязчиво показать посетителю что мы позаботились о работоспособности данной ссылки в его браузере. Думаю наиболее удачным вариантом будет определять каким браузером пользуется посетитель нашего сайта и выводить соответствующий логотип возле ссылки. А можно просто вывести сразу все логотипы:

Добавить в Избранное
Так выглядит конечный результат

Надеюсь моя статья помогла вам понять как работает кросбраузерная ссылка "Добавить в Избранное" и вы будете применять это на практике, создавая все более удобные сайты для ваших посетителей. Можно также сделать так, чтобы в Избранном напротив закладки отображалась иконка вашего сайта. Об этом читайте в статье «Иконка для вашего сайта».

Другие записи по теме в разделе статьи по JavaScript

Копирование статьи запрещено.