Кроссбраузерное добавление страницы в закладки…
Ex.clusive | 30.07.2010Недавно столкнулся с необходимостью написания небольшой javascript-функции для добавления страницы в закладки (“Избранное”), которая бы адекватно воспринималась как минимум тремя основными браузерами: FireFox, Opera, Internet Explorer.
Разработка скрипта
Изучив основные функции, существующие для достижения этой цели в отдельных браузерах и несколько готовых примеров, попытался собрать всё в кучу и написать простой, компактный, но, при этом, действенный код. При написании так же учитывал реализацию возможности как автоматического определения текущего url и заголовка открытого документа, так и возможность установки фиксированного адреса и описания для закладки.
<script>function addBookmark(x) { var url = location.href; var title = document.title; //url = "http://exclusiveblog.ru"; //title = "Палитра тишины - Заметки, находки, работы…"; if ((typeof window.sidebar == "object") && (typeof window.sidebar.addPanel == "function")) window.sidebar.addPanel (title, url, ""); else if (typeof window.external == "object") window.external.AddFavorite(url, title); else if (window.opera) { x.href=url; x.title=title; x.rel = "sidebar"; return true; } else alert("Для добавления закладки вручную нажмите Ctrl+D"); return true; } </script>
Код функции, как любой другой javascript-сценарий, можно вставлять непосредственно в html-код страницы перед ссылкой добавления закладки, либо, по необходимости, можно вынести во внешний файл, подключаемый посредством <script scr=”…”>.
Раскомментировав строчки 5-6, можно установить… фиксированный заголовок и ссылку для создаваемой закладки. Когда строчки закомментированы – берутся значения из заголовка текущей страницы.
Код вызова функции:
<a href="#" onClick="addBookmark(this)">Добавить в избранное</a>
Тестирования сценария
Пару слов о проверках работоспособности:
- Internet Explorer 6.0 – Работает;
- Mozilla FireFox 3.6.3 – Работает;
- Opera 9.64 – Работает;
- Google Chrome 5.0 – Выводится информация о добавлении закладки вручную;
- Apple Safari 4.5 – Выводится информация о добавлении закладки вручную.
Компактная альтернатива
В качестве еще одного примера хотелось бы привести гораздо более компактный скриптик, найденный на просторах Рунета.
<a rel="sidebar" onclick="window.external.AddFavorite(location.href,document.title); return false;" href="" title="заголовок закладки">Добавить в избранное</a>
От “самописного” его отличают 2 основные черты: он не умеет оповещать пользователя о невозможности автоматически добавить страницу в избранное в данном браузере и, при использовании его в браузерах “Opera” или “FireFox”, по-умолчанию в качестве заголовка закладки указывает содержимое параметра title из тега <a>. Кроме того, Safari и Chrome на этот метод абсолютно не реагируют.
Комментируем… Буду рад выслушать ваши идеи и предложения по данному вопросу _)
Отличная статья, спасибо, как раз недавно об этом думал!
За этот скрипт спасибо. Кроссбраузерного решения пока не видел. А самому заморачиваться лениво было как-то :) Может прицеплю куда-то.
Ну, идеально кроссбраузерное решение писать очень долго и достаточно (ибо под хром и сафари, уложиться в пару строк не выйдет). А мне надо было управиться очень быстро _)
НА Chrome старших версий этот скрипт не действует. Сам использую следующий скрипт, который работает без осечек, но в нём нет функциональной поддержки огнелиса, просто выводится сообщение о добавлении путём CTRL+D.
/*
* Copyright 2006-2007 Dynamic Site Solutions.
* Free use of this script is permitted for non-commercial applications,
* subject to the requirement that this comment block be kept and not be
* altered. The data and executable parts of the script may be changed
* as needed. Dynamic Site Solutions makes no warranty regarding fitness
* of use or correct function of the script. Terms for use of this script
* in commercial applications may be negotiated; for this, or for other
* questions, contact “license-info@dynamicsitesolutions.com”.
*
* Script by: Dynamic Site Solutions — http://www.dynamicsitesolutions.com/
* Last Updated: 2007-06-17
*/
//IE5+/Win, Firefox, Netscape 6+, Opera 7+, Safari, Konqueror 3, IE5/Mac, iCab 3
var addBookmarkObj = {
linkText:’ДОБАВИТЬ В ЗАКЛАДКИ’,
addTextLink:function(parId){
var a=addBookmarkObj.makeLink(parId);
if(!a) return;
a.appendChild(document.createTextNode(addBookmarkObj.linkText));
},
addImageLink:function(parId,imgPath){
if(!imgPath || isEmpty(imgPath)) return;
var a=addBookmarkObj.makeLink(parId);
if(!a) return;
var img = document.createElement(‘img’);
img.title = img.alt = addBookmarkObj.linkText;
img.src = imgPath;
a.appendChild(img);
},
makeLink:function(parId) {
if(!document.getElementById || !document.createTextNode) return null;
parId=((typeof(parId)==’string’)&&!isEmpty(parId))
?parId:’addBookmarkContainer’;
var cont=document.getElementById(parId);
if(!cont) return null;
var a=document.createElement(‘a’);
a.href=location.href;
if(window.opera) {
a.rel=’sidebar’; // this makes it work in Opera 7+
} else {
// this doesn’t work in Opera 7+ if the link has an onclick handler,
// so we only add it if the browser isn’t Opera.
a.onclick=function() {
addBookmarkObj.exec(this.href,this.title);
return false;
}
}
a.title=document.title;
return cont.appendChild(a);
},
exec:function(url, title) {
// user agent sniffing is bad in general, but this is one of the times
// when it’s really necessary
var ua=navigator.userAgent.toLowerCase();
var isKonq=(ua.indexOf(‘konqueror’)!=-1);
var isSafari=(ua.indexOf(‘webkit’)!=-1);
var isMac=(ua.indexOf(‘mac’)!=-1);
var buttonStr=isMac?’Command/Cmd’:'CTRL’;
if(window.external && (!document.createTextNode ||
(typeof(window.external.AddFavorite)==’unknown’))) {
// IE4/Win generates an error when you
// execute “typeof(window.external.AddFavorite)”
// In IE7 the page must be from a web server, not directly from a local
// file system, otherwise, you will get a permission denied error.
window.external.AddFavorite(url, title); // IE/Win
} else if(isKonq) {
alert(‘Нажми CTRL + B для добавления в закладки.’);
} else if(window.opera) {
void(0); // do nothing here (Opera 7+)
} else if(window.home || isSafari) { // Firefox, Netscape, Safari, iCab
alert(‘Нажми ‘+buttonStr+’ + D для добавления в закладки.’);
} else if(!window.print || isMac) { // IE5/Mac and Safari 1.0
alert(‘Нажми Command/Cmd + D для добавления закладки.’);
} else {
alert(‘Добавить сайт в закладки можно только вручную’+
‘through your browser.’);
}
}
}
function isEmpty(s){return ((s==”)||/^\s*$/.test(s));}
function dss_addEvent(el,etype,fn) {
if(el.addEventListener && (!window.opera || opera.version) &&
(etype!=’load’)) {
el.addEventListener(etype,fn,false);
} else if(el.attachEvent) {
el.attachEvent(‘on’+etype,fn);
} else {
if(typeof(fn) != “function”) return;
if(typeof(window.earlyNS4)==’undefined’) {
// to prevent this function from crashing Netscape versions before 4.02
window.earlyNS4=((navigator.appName.toLowerCase()==’netscape’)&&
(parseFloat(navigator.appVersion)<4.02)&&document.layers);
}
if((typeof(el['on'+etype])=="function")&&!window.earlyNS4) {
var tempFunc = el['on'+etype];
el['on'+etype]=function(e){
var a=tempFunc(e),b=fn(e);
a=(typeof(a)=='undefined')?true:a;
b=(typeof(b)=='undefined')?true:b;
return (a&&b);
}
} else {
el['on'+etype]=fn;
}
}
}
dss_addEvent(window,'load',addBookmarkObj.addTextLink);
// to make multiple links, do something like this:
/*
dss_addEvent(window,'load',function(){
var f=addBookmarkObj.addTextLink;
f();
f('otherContainerID');
});
*/
// below is an example of how to make an image link with this
// the first parameter is the ID. If you pass an empty string it defaults to
// 'addBookmarkContainer'.
/*
dss_addEvent(window,'load',function(){
addBookmarkObj.addImageLink('','/images/add-bookmark.jpg');
});
*/
Ну вот, опять же, если нет поддержки ФФ – значит осечки есть _)
Я же писал скрипт на актуальные на тот момент версии браузеров с уклоном именно в сторону “ведущей троицы”.
На будущее, код в коммент – это не гуд, юзайте http://pastie.org/ или подобные сервсисы. Кстати, вечером как раз их обзор выложу.
За скрипт спасибо, на досуге обязательно поковыряю, может чего умного соображу и смогу обьединить _)
На то и расчёт, чтоб знающий чел поковырял и объединил. А сайт pastie классный, не знал, и проще в использовании Google Doc.
Да вообще сервис – высший класс. Вставил, выбрал тип, сохранил. Усе, можно делиться )
[...] ~~~~~~~~~~~~~~~~~~~~~~~~ Тут можно узнать, как сделать на сайте кроссбраузерное добавление страницы в закладки. Интересует вопрос «Как заработать в интернете без [...]
чую с закладками теперь не будет проблем =) спасибо =)
спасибо
А я сделал гораздо проще! И что самое главное все работает, но теперь наверное уже завтра все доделаю на своем сайте. http://kswork.ru/
Итак код выглядит так:
Межу тегами нужно вставить:
function bookmarksite(title, url)
{
if ((typeof window.sidebar == “object”) && (typeof window.sidebar.addPanel == “function”)) window.sidebar.addPanel (title, url, “”);
else if (typeof window.external == “object”) window.external.AddFavorite(url, title);
else return false;
return true;
}
А между тегами влюбом выгодном для Вас месте нужно вставить:
В избранное
Примечание:
1)Проверил на опере. Все работает.
2)Вместо ссылки и тайтла вставьте свои тайтл и ссылку на свой ресурс.
* А между тегами влюбом выгодном для Вас месте нужно вставить:
В избранное
Примечание 2:
К сожалению код для вставки некорректно отображался в коментарие. Поэтому пришлось немного изменить его. Чтобы было выднее. Пробелы в соответствующих местах уберите.
Все равно не отображается. Ладно, чтобы было все понятно перйдите по ссылке. Выложил все в текстовом документе.
Для просмотра перейдите по ссылке: http://kswork.ru/izbrannoe.txt
Спасибо!
На маленькое количество пользователей Safari и Chrome можно и ***** :-)
Если уж они добрались до этих экзотических браусеров, то смогут и сами занести интересную ссылку в фавориты
пасибки, работает. а то уже четвертый код ставлю и все никак не фурычило! добавил вас в закладки))))
Спасибо! Жаль что нет сразу решения для хрома и сафари.