Закладурки: краткий курс


Кому это нужно?

Эта статья может быть полезна тем, кто собирается сам создавать закладурки, а также тем, кому интересно, как это работает. Если Вы просто хотите пользоваться готовыми закладурками и Вам все равно, как они устроены, можете не тратить время зря и сразу идти к готовым закладуркам для Вашего браузера (если Вы там еще не были).

Примеры, приведенные в этой статье, достаточно просты, так что для получения общего впечатления о технологии закладурок не требуется глубокого знания языка JavaScript, но если Вы захотите создавать свои собственные закладурки, язык придется изучить. Интерактивное руководство "Основы JavaScript" на русском и английском языках можно найти на сайте Алексея Курбатова JavaScripter.net (кстати, там же Вы найдете и парочку оригинальных закладурок). Итак, приступим к делу.

Лед тронулся, господа присяжные заседатели!

С выходом 3-ей версии Netscape Navigator (далее NN) и 4-й версии Microsoft Internet Explorer (IE), наряду с адресами типов http:, ftp:, mailto: и др. стало возможным использовать адреса (URL) вида javascript:<код процедурки> в поле браузера Адрес на всех платформах: Windows, Mac, Unix и т.п. Если Вы используете подходящий браузер, наберите следующую строку в поле Адрес прямо сейчас:

    javascript:alert('Здравствуй, Дедушка Мороз!')

Если браузер подходящий и поддержка JavaScript не отключена, вы должны увидеть маленькое окошко с соответствующим приветствием. Обратите внимание, что, несмотря на то, что Вы что-то ввели в поле Адрес, документ, который был открыт в браузере, никуда не делся и остался на своем месте. А можем ли мы обратиться из нашей JavaScript-процедурки к атрибутам текущего документа? Давайте попробуем.

Работаем с атрибутами текущей страницы

Например, чтобы определить дату последней модификации текущего документа, Вы можете ввести в поле Адрес следующую процедурку:

    javascript:alert(document.lastModified)

Выведется дата последнего изменения текущей страницы.

Если Вы знакомы с языком JavaScript, то знаете, что он позволяет не только извлекать информацию из атрибутов веб-страницы, но и модифицировать их. Если Вы регулярно посещаете сайты, интересные по содержанию, но раздражающие вас, например, цветом фона, который мешает читать текст, почему бы не придумать способ менять цвет фона по своему желанию без лишних хлопот? Следующая процедурка изменяет фон текущей страницы на белый:

    javascript:void(document.bgColor='white')

Здесь важно заметить, что эта закладурка меняет только цвет фона, если же в качестве фона используется картинка, то для борьбы с нею нужна другая закладурка - попробуйте написать ее сами.

Однако, если каждый раз придется вводить это в поле Адрес вручную, то многие скорее предпочтут мириться с розовым текстом на зеленом фоне. Нельзя ли как-нибудь упростить процесс?

А что если сохранить процедурку, как закладку?

А почему бы и нет? Ничто не мешает Вам это сделать. Ваша javascript:процедурка может быть сохранена в меню Закладки (Избранное) или даже на панели ссылок браузера точно так же, как и обычный http:адрес. Процедурка не может причинить никакого вреда (в самом худшем случае Вы просто увидите сообщение об ошибке JavaScript) и ее сохранение в браузере совершенно безопасно.

Но как лучше сохранить процедурку? В IE для этого достаточно перетащить содержимое поля Адрес (хватайтесь за иконку интернет-страницы в его левом углу) в нужное Вам место (панель Ссылки или меню Избранное), но если точно так же попытаться сохранить текущий адрес в NN 4.0, Вы сохраните лишь адрес текущей страницы. Конечно, есть и универсальный способ: просто создайте в своем любимом HTML- или текстовом редакторе временный файл, например test.htm, с процедурками JavaScript, оформленными, как полные гипертекстовые ссылки, например, так:

  <A HREF="javascript:void(document.bgColor='white')">Белый фон</A>

  <A HREF="javascript:void(document.bgColor='black')">Черный фон</A>

что при открытии файла в браузере будет выглядеть так:

    Белый фон

    Черный фон

а потом просто перетащите эти ссылки в закладки, точно так же, как Вы сохраняете обычные http:ссылки.

Вот Вы и создали две простейшие закладурки (закладки-процедурки), которые теперь сможете применить для изменения цвета фона любой страницы в любой момент.

Очевидно, что создавать и редактировать закладурки в редакторе гораздо удобнее, чем в поле Адрес браузера. Но при отладке или проведении экспериментов, мелкие правки можно вносить в закладурку прямо на месте - для IE наведите мышь на закладурку прямо в панели или меню, нажмите правую кнопку, выберите Свойства и редактируйте (для NN предварительно придется открыть окно Закладки->Изменить Закладки).

Кстати, а зачем нужен void?

Если процедурка, прописанная в javascript:ссылке, возвращает какое-нибудь значение, браузер выводит это значение в текущее окно, затирая текущую страницу (если не верите, попробуйте убрать из предыдущей закладурки оператор void и выполнить ее). Это нам совсем ни к чему, но, к счастью, в языке JavaScript предусмотрен оператор void, который игнорирует значение своего операнда и всегда возвращает неопределенное значение. Таким образом, если в процессе выполнения закладурки возвращается значение, его можно нейтрализовать с помощью оператора void.

Фреймы: тысяча и одна проблема

Если Вы попробуете выполнить закладурку "Белый фон" на странице, состоящей из фреймов, то Вы увидите, что она не сработает. Дело в том, что закладурка выполняется в контексте текущего документа в окне браузера, а если сайт использует фреймы, то текущий документ HTML содержит только описание размеров фреймов и адреса документов, в них загружаемых, и, следовательно, изменять цвет фона нужно не в главном документе, а во всех его фреймах. Конечно же, JavaScript позволяет сделать и это, просто код закладурки получается немного сложнее. Усовершенствованная версия закладурки "Белый фон" обходит все фреймы в текущем окне, если они есть, и меняет фон в каждом из них.

    Белый фон (улучшенная версия):

    javascript:function $(w){
                   void(w.document.bgColor='white');
                   var i=w.length;
                   while(i--)
                       $(w[i]);
               }
               $(this)

С фреймами связана еще одна проблема: из соображений безопасности спецификация языка JavaScript на всякий случай не позволяет скриптам, прописанным на веб-странице, обращаться к информации, содержащейся в страницах, загруженных с другого сайта (точнее, адрес которых принадлежит другому домену). Как мы уже убедились, процедурка, выполняемая из поля Адрес браузера или из закладки может обращаться к информации текущего документа, то есть с точки зрения безопасности она "приписывается" к текущему документу. Но если хотя бы в один фрейм загружена "чужая" страница, то есть принадлежащая не тому домену, что и главный документ, при попытке обращения закладурки к этому фрейму возникнет ошибка доступа JavaScript и выполнение закладурки будет прервано.

К счастью, для большинства сайтов с обычными фреймами такое стечение обстоятельств маловероятно. Однако у пользователей IE несколько больше шансов нарваться на сообщение об ошибке доступа. Дело в том, что IE поддерживает особый вид фреймов (тег <IFRAME>), которые используются некоторыми баннерными системами для показа так называемых HTML-баннеров, которые как раз чаще всего грузятся с "чужого" домена. Для того, чтобы избежать ошибки доступа на таких страницах, проще всего сделать так, чтобы закладурка для IE проходила только по обычным фреймам <FRAME> и игнорировала фреймы <IFRAME>. Это еще несколько усложняет код и заодно делает его несовместимым с NN:

    Белый фон (только для IE):

    javascript:function $(w){
                   void(w.document.bgColor='white');
                   var i=w.document.all.tags('frame').length;
                   while(i--)
                       $(w[i]);
               }
               $(this)

Война браузеров

К сожалению, расхождения между браузерами IE и NN не ограничиваются только наличием или отсутствием тега <IFRAME>. Каждый, кому приходилось программировать на JavaScript, знает, что объектные модели, реализованные в этих браузерах, настолько различны, что при написании любого мало-мальски функционального скрипта фактически приходится писать две его версии - для каждого браузера свою. Если скрипт располагается на веб-странице, которую посетители смотрят разными браузерами, на ней обычно размещают обе версии кода, в самом начале определяют, каким браузером пользуется клиент, и передают управление нужной версии. В принципе, можно поступать так же и при программировании закладурок, но, на мой взгляд, это не совсем правильно: ведь закладурка сохраняется в конкретном браузере и с этого момента работает только в нем - зачем же держать в ней кусок кода, который никогда не будет выполнен? Я считаю более правильным создавать две разные закладурки, предназначенные каждая для своего браузера.

В качестве заключительного примера привожу две закладурки, которые извлекают из текущей страницы текст, который пользователь выделил мышкой, и выводят его в окошке, при этом они максимально корректно работают с фреймами. Сравните тексты для IE и NN и прочувствуйте разницу:

    Выделенный текст (версия для NN):
                
    javascript:function $(w){
                   var i=w.length,
                       s=w.document.getSelection();
                   while(i--)
                       s+=$(w[i]);
                   return s;
               }
               alert($(this));

    Выделенный текст (версия для IE):
                
    javascript:function $(w){
                   with(w.document){
                       var i=all.tags('frame').length,s='';
                       if(i)
                           while(i--)
                               s+=$(w[i]);
                       else s=selection.createRange().text;
                   }
                   return s;
               }
               alert($(this));

Сами по себе эти закладурки могут показаться довольно бесполезными, но когда Вы начнете писать свои собственные закладурки, эти примеры Вам очень пригодятся - практически все мои поисковые и лингвистические закладурки в своей основе имеют именно этот код - нужно просто заменить вывод выделенного текста на экран на то действие, которое хотите с ним сделать Вы - поиск, перевод и т.п.

Сколько можно? Столько, сколько нужно!

Удивительно большое разнообразие мнений существует по вопросу о предельном размере закладурок. Разные источники приводят разные данные - от 256 до 4000 символов. Я не проводил никаких специальных исследований в этом направлении, но могу точно сказать, что, во-первых, закладурки длиной 700-800 символов вполне надежно работают и в IE и в NN на платформе Windows, а во-вторых, этого размера мне пока вполне хватает.

Ну вот, собственно, и все - для краткого курса, на мой взгляд, вполне достаточно. Надеюсь, что мне удалось заинтересовать Вас новой и многообещающей технологией. Если Вы создадите новые полезные закладурки - присылайте их мне и я их выложу на этот сайт со ссылкой на Вас.


Вернуться на главную страницу.

Copyright © Андрей Орехов, 1999-2006
НАВИГАЦИЯ
Главная страница

Закладурки для Вашего браузера

Пресса о закладурках

РЕСУРСЫ
Bookmarklets Home

Doc JavaScript: Bookmarklets

Writing embedded-date bookmarklets