Nickolay.info. JavaScript. Добавление ссылки в Избранное, работающее для всех браузеров

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

<a href="#" onClick='window.external.AddFavorite("URL_любимого_сайта", "Название_закладки");return false;'>
 код картинки или текст ссылки
</a>

- то есть, код для добавления страницы в Избранное (в ряде браузеров называется "Закладки").

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

Мы ограничимся "тройкой лидеров" - Internet Explorer последних версий, Opera, Mozilla Firefox (тем более, что последний все равно определяет себя как Netscape).

Скрипт для удобства поместим в отдельный файл с именем favorite.js, вот полное содержимое этого файла:

function getBrowserInfo() {
 var t="",v = "";
 if (window.opera) t = 'Opera';
 else if (document.all) {
  t = 'IE';
  var nv = navigator.appVersion;
  var s = nv.indexOf('MSIE')+5;
  v = nv.substring(s,s+1);
 }
 else if (navigator.appName) t = 'Netscape';
 return { type:t, version:v };
}
 
function bookmark (a){
 var url = window.document.location;
 var title = window.document.title;
 var b = getBrowserInfo();
 if (b.type == 'IE' && b.version >= 4) {
  window.external.AddFavorite(url,title);
 }
 else if (b.type == 'Opera') {
  a.href = url;
  a.rel = "sidebar";
  a.title = url+','+title;
  return true;
 }
 else if (b.type == 'Netscape') {
  window.sidebar.addPanel(title,url,"");
 }
 else window.alert("Не могу определить браузер.... нажмите CTRL+D для добавления страницы в Избранное");
 return false;
}

...и ссылка скачать файл favorite.js

Первая из функций - getBrowserInfo() - определяет тип браузера и составляет структуру из двух элементов - тип type и версия version. Вызываемая из документа вторая функция - bookmark - в зависимости от типа браузера и версии обращается к имеющемуся в его "яваскрипт-машине" методу.

Очевидная логика обеих функций позволяет, при необходимости, пополнить их решениями для других обозревателей.

Включить этот скрипт из HTML-документа можно следующим кодом:

<script type="text/javascript" src="favorite.js"></script>

(предполагается, что favorite.js лежит в той же папке, что и документ). Пользователь будет щелкать по ссылке с таким кодом:

<a href="javascript:void(0)" onclick="return bookmark(this)">Добавить в избранное</a>

Вот этот код в действии: Добавить в избранное

Код может не работать на локальной машине в Internet Explorer 7 и Mozilla Firefox, но в онлайне должен работать во всех заявленных браузерах.

Неуклюжие слова "Добавить в Избранное", конечно же, никто не мешает заменить на помещенную в нужное место картинку. Код:

<a href="javascript:void(0)" onclick="return bookmark(this)">
 <img src="add2fvt.gif" width=16 height=16 hspace=0 vspace=0 border=0 alt="Добавить в Избранное...">
</a>

... и тогда получится вот что: Добавить в Избранное...

Можно ли сделать все короче? Давайте попробуем, заведя для этой цели файл favorite2.js:

function bookmark2 (a) {
 if (window.opera && window.print) {
  var mbm = a;
  mbm.setAttribute("rel", "sidebar");
  mbm.setAttribute("title", document.title);
  mbm.setAttribute("href", window.location.href);
  mbm.click();
 }
 else if (window.sidebar) {
  window.sidebar.addPanel(document.title, window.location.href, "");
 }
 else if (window.external) {
  window.external.AddFavorite(window.location.href, document.title);
 }
}

(скачать favorite2.js) ...и включив-вызвав его подобным же кодом:

<script type="text/javascript" src="favorite2.js"></script>
<a href="javascript:void(0)" onclick="return bookmark2(this)">угу!</a>

угу!

P.S. от 2010 г. До сих пор, случается, приходят письма насчёт работы или не-работы приведённого кода в Google Chrome, проблем с добавлением ссылки в боковую панель в Firefox и т.п. Меж тем, всё довольно просто:

1. Браузеры, написанные на движке Webkit, не имеют методов для программного добавления в Избранное (Google Chrome, Safari и т.п.).

2. Для движка Gecko (Firefox, Netscape) метод window.sidebar.addPanel по докам требует формирования ссылок с установленным атрибутом rel="sidebar". Обычно для добавления ссылки "куда надо" достаточно снять галку "отображать в боковой панели" в окне добавления закладки :) Кстати, учитывая, что Chrome определяет себя как Netscape, начинать "отбор" следует с Webkit'овских браузеров.

3. У многих браузеров проблемы с кэшами, часто всё начинает работать после принудительного обновления страницы (кнопка "Обновить", F5, Ctrl+F5, кнопка "Обновить" при зажатой Ctrl :)

4. Если всё же очень хочется отличать Google Chrome или там Safari от других браузеров, видоизмените скрипт, добавив в функцию getBrowserInfo() новые ветки для "выцепления" новых браузеров. Вот вариант для favorite.js:

function getBrowserInfo() {
 var t="",v = "";
 if (navigator.userAgent.indexOf('Chrome')>=0) t='Chrome';
 else if (window.opera) t = 'Opera';
 else if (document.all) {
  t = 'IE';
  var nv = navigator.appVersion;
  var s = nv.indexOf('MSIE')+5;
  v = nv.substring(s,s+1);
 }
 else if (navigator.appName) t = 'Netscape';
 return { type:t, version:v };
}
 
function bookmark(a){
 var url = window.document.location;
 var title = window.document.title;
 var b = getBrowserInfo();
 if (b.type == 'Chrome') {
  alert("К сожалению, в Google Chrome нет метода для программного добавления в Закладки... нажмите CTRL+D");
 }
 else if (b.type == 'IE' && b.version >= 4) {
  window.external.AddFavorite(url,title);
 }
 else if (b.type == 'Opera') {
  a.href = url;
  a.rel = "sidebar";
  a.title = url+','+title;
  return true;
 }
 else if (b.type == 'Netscape') {
  window.sidebar.addPanel(title,url,"");
 }
 else alert("Не могу определить браузер... нажмите CTRL+D для добавления страницы в Избранное");
 return false;
}

Для анализа данных браузера, доступных через Javascript, полезным может оказаться следующий мини-скрипт:

<script type="text/javascript">
 alert('navigator.appName=' + navigator.appName + '\n' +
       'navigator.appVersion=' + navigator.appVersion + '\n' + 
        'navigator.userAgent=' + navigator.userAgent);
</script>

Рейтинг@Mail.ru
вверх гостевая; E-mail