Pers.narod.ru. 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>
гостевая; E-mail |