Что такое букмарклет?
В своей книге JavaScript на примерах я отвел несколько страниц для примеров с закладурками. К сожалению, время показало, что данный термин не закрепился в обороте речи у веб-мастеров. В настоящий момент в ходу термин Букмарклет, который можно увидеть, например, в Internet Explorer.
Но это никак не мешает использовать удобную технологию на практике. Что же такое букмарклет?
Букмарклет представляет небольшой фрагмент кода на JavaScript, который можно сохранить в закладках браузера. Сам код можно оформить как ссылку на странице. Пользователь может перетащить ее в закладки, на панель избранного браузера или просто щелкнуть по ссылке, запустив букмарклет прямо на странице.
Букмарклеты набирают большую популярность и используются на многих популярных ресурсах. У меня собралась внушительная коллекция букмарклетов, которую я собираюсь разместить на отдельной странице Букмарклеты.
Чтобы понять, о чем идет речь, посмотрите на букмарклет Int/Ext Links - Щелкни меня. Данный букмарклет окрашивает ссылки на внешние сайты в красный цвет, ссылки внутри сайта в зеленый, а ссылки внутри страницы – в оранжевый.
Вы можете проверить работу букмарклета прямо здесь, щелкнув по нему мышью. Для удобства я подготовил тестовые ссылки:
Внешняя ссылка - ведет на мой блог
Ссылка внутри сайта - ведет на главную страницу сайта
Ссылка внутри страницы - ведет в начало страницы
Если вам понравился букмарклет, то перетащите его мышкой на панель закладок в Google Chrome или другого браузера, перейдите на любой другой сайт и щелкните по сохраненному букмарклету, чтобы проверить его работоспособность.
Что важно помнить
Возможность создания букмарклетов появилась с Internet Explorer 4.0 и Chrome 1.0. Но у разных браузеров существуют небольшие различия в объектной модели. Поэтому, существуют универсальные букмарклеты, подходящие для всех браузеров и отдельные версии букмарклетов для конкретного браузера. Как правило, разработчик при описании своего букмарклета указывает список поддерживаемых браузеров.
Многие букмарклеты не работают на сайтах, использующих фреймы. К счастью, мода на фреймы прошла, а в HTML5 и вовсе не поддерживается.
Часть букмарклетов в своей работе обращаются к онлайн-ресурсам, например, для перевода иностранных слов. Иногда, владельцы таких онлайн-ресурсов меняют адреса или препятствуют корректной работе букмарклетов. Хотя встречаются и обратные примеры, когда, наоборот, букмарклеты поощряются.
Как создать свой букмарклет
Все мы привыкли набирать в адресной строке адрес сайта типа http://... Браузер понимает, что мы хотим перейти на указанную страницу по протоколу http. Но в адресной строке можно набрать адрес в виде javascript:код процедуры. Наберите прямо сейчас в адресной строке (копирование не сработает, наберите вручную):
javascript:alert("Ты покормил сегодня кота?");
После нажатия клавиши Enter вы увидите диалоговое окно с вашим соощением. Как видите, ничего сложного. По такому же принципу мы можем обращаться к свойствам открытого документа, например, чтобы узнать дату последней модификации текущего документа, можно ввести следующий код:
javascript:alert(document.lastModified);
А вот уже более полезный пример, позволяющий изменить фон страницы на красный:
javascript:void(document.bgColor='red')
Естественно, в таком виде полезность примера сомнительна, но вы можете изменить цвет фона страницы на белый (попробуйте сделать самостоятельно). Вспомните, сколько раз вам приходилось бывать на таких сайтах, где текст невозможно разобрать на каком-нибудь фоне.
Вряд ли вы будете вручную вводить нужные команды на каждом сайте. Чтобы упростить данную задачу, нужно сохранить процедуру как закладку!
Как уже говорилось, практически все популярные браузеры поддерживают букмарклеты. Вам необходимо создать страницу на сайте с процедурами на JavaScript и оформить их как ссылку, например, так:
<a href="javascript:void(document.bgColor='red')">Красный фон</a>
Готовый пример: Красный фон
Небольшое предупреждение: данный букмарклет меняет только цвет фона. Если на сайте в качестве фона используется картинка (как на данной страниц), то нужно использовать другой прием.
Можно сохранить подготовленный букмарклет перетаскиванием с помощью мыши на панель закладок или панель Избранное. Также можно щелкнуть правой кнопкой мыши на ссылке и выбрать команду Добавить закладку или Добавить в Избранное.
Редактировать сохраненный букмарклет можно прямо в закладках. Нажмите правой кнопкой на нужном букмарклете и выберите соответствующие команды браузера: Изменить..., Свойства и т.д.
Зачем нужен void
Если процедура, прописанная в JavaScript-ссылке, возвращает какое-нубудь значение, браузер выводит это значение в текущее окно, затирая текущую веб-страницу. Оператор void позволяет избежать нежелательной ситуации, игнорируя значение своего операнда и всегда возвращает неопределенное значение. Таким образом мы нейтрализуем возвращаемое значение с помощью void.
Итак, вы вкратце поняли, что такое букмарклет, как его создать и распространять. А теперь добро пожаловать в коллекцию букмарклетов.