Кроссбраузерное добавление страницы в закладки

Кроссбраузерное добавление страницы в закладки реализуется с использованием JavaScript. Для добавления страницы в Избранное браузеров Internet Explorer и браузеров, работающих на движке IE, вызывается стандартный метод AddFavorite. Однако здесь есть одна важная деталь. Если страница IE открыта как embedded-объект в другом приложении, например в плагинах или при использовании компонентов для работы с html, то объект window.external присутствует, но его метод AddFavorite не срабатывает. Это наиболее частая ошибка разработчиков, которые просто копируют код друг у друга без его понимания и тестирования. Также большой ошибкой будет использование на своем сайте только одного этого способа.

Браузеры на движке Gecko, такие как Firefox, Netscape, K-Meleon и другие, имеют объект window.sidebar и метод для добавления addPanel. Третий параметр метода недокументирован и является необязательным, поэтому в скрипте заменяется просто пустой строкой. Обратите внимание, что по умолчанию ссылка добавляется не совсем в закладки, а в боковую панель браузера. Для добавления страницы в нужную папку закладок выберите ее в выпадающем меню.

Для браузера Opera ссылка добавления в закладки должна иметь атрибут rel="sidebar". Но если этот атрибут ставить сразу по умолчанию, то некоторые браузеры типа Netscape будут отрабатывать функцию добавления в закладки дважды: первый раз через скрипт и второй раз через атрибут rel. Поэтому придется изменять атрибуты ссылки динамически, предварительно определив браузер проверкой типа объекта opera.

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

Теперь, когда у нас есть все исходные данные, можно написать кроссбраузерный скрипт для добавления страницы в закладки. У меня получился вот такой:

// Добавить в Избранное 
function add_favorite(a) { 
  title=document.title; 
  url=document.location; 
  try { 
    // Internet Explorer 
    window.external.AddFavorite(url, title); 
  } 
  catch (e) { 
    try { 
      // Mozilla 
      window.sidebar.addPanel(title, url, ""); 
    } 
    catch (e) { 
      // Opera 
      if (typeof(opera)=="object") { 
        a.rel="sidebar"; 
        a.title=title; 
        a.url=url; 
        return true; 
      } 
      else { 
        // Unknown 
        alert('Нажмите Ctrl-D чтобы добавить страницу в закладки'); 
      } 
    } 
  } 
  return false; 
}

Пример ссылки "Добавить в Избранное" для этого скрипта:

<a href="#" onclick="return add_favorite(this);">Добавить в Избранное</a>

Рабочий пример реализации вы можете увидеть прямо на этой странице. Использование конструкций try-catch позволяет скрипту правильно отрабатывать в любых нестандартных ситуациях, например в окне IE Tab, открытом в браузере Firefox. Также скрипт корректно работает в различных экзотических браузерах, которые нельзя однозначно определить через UserAgent или DOM-свойства. Всякие хваленые коммерческие поделки типа DLE в этой ситуации молча обламываются.

Ищется документация по движку WebKit (браузеры Safari, Chrome) в части добавления страницы в закладки. Кто найдет - большая просьба поделиться.

Комментарии

Оставьте свой комментарий
А
Анна

У меня арендованный магазин на Юми, не знаю как вверху страницы установить кнопку. Код куда нужно вставлять?

// Добавить в Избранное
function add_favorite(a) {
title=document.title;
url=document.location;
try {
// Internet Explorer
window.external.AddFavorite(url, title);
}
catch (e) {
try {
// Mozilla
window.sidebar.addPanel(title, url, "");
}
catch (e) {
// Opera
if (typeof(opera)=="object") {
a.rel="sidebar";
a.title=title;
a.url=url;
return true;
}
else {
// Unknown
alert('Нажмите Ctrl-D чтобы добавить страницу в закладки');
}
}
}
return false;
}
Пример ссылки установить получилось только внизу страницы 🙂

В
Виктор

Давольно таки полезный скрипт,восновном как не искал скрипты так постоянно с рекламой были или не рабочие. Спасибо за хороший скрипт.

Г
Гость

Как-то искал данный скрипт, находил только заклатки для соц сетей, а подобный так и не нешел. Спасибо, добавил в заклатки 🙂

А
Андрей

Прекрасная реализация функции! Уже скопировал и пользуюсь =)
[ps. насколько знаю, в webkit нельзя добавить в закладки с помощью js(или можно, но тот кто знает - молчит как партизан!)]

P
Profi30

@kupitedom: я вот не являюсь вебмастером этого ресурса но лично мне кнопочка понравилась. А если она ещё действительно хорошо работает в IEtab, то вообще супер. Во всяком случае, это хорошее решение закладок для сайта. Сейчас проверил — прекрасно работает.

И
Инна

Подскажите, плиз, а как сделать, чтобы предложение "добавить сайт в закладки" было прописано текстом, а не в виде кнопки?

K
kupitedom

Все эти кнопки нужны только самому вебмастеру для удобства поэтому есть ли смысл их вообще светить.

3
3wDev

@Лев: она находится в доп.меню, выделеном цветом и весьма в привычном месте. Но согласен, что значительного акцента на ней не делается.

Л
Лев

@3wDev: Так кнопка маленькая и не видна... Смысл ее делать, если ни кто не замечает?

M
Michael

Да, в хроме не работает =(

Загрузить еще