|
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>
|
|