Javascript.RU

Букмарклеты и правила их написания

Букмарклет(bookmarklet) - это javascript-код, который сохраняется как закладка в браузере. Он работает за счет использования протокола <a href="javascript:...">.

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

Поэтому де-факто букмарклет - это javascript-плагин к браузеру.

Для примера сделаем букмарклет, который осуществляет поиск выделенного текста в гугле.

Функция на javascript была бы такая:

function searchGoogle() {
  var selected
  
  if (window.getSelection) selected = window.getSelection()
  else if (document.getSelection) selected = document.getSelection()
  else selected = document.selection.createRange().text
  var q = "" + selected

  if (q)  location="http://www.google.com/search?q="+encodeURIComponent(q);
  void 0;
}

В конце функции searchGoogle стоит void 0. Это кроссбраузерно останавливает обработку ссылки браузером, предотвращая ненужный переход.

Испытаем ее:

<a href="javascript:searchGoogle();">Искать выделенное</a>

Выделите текст и кликните: Искать выделенное

Чтобы превратить функцию в букмарклет - достаточно "запаковать" ее в одну строку и заменить кавычки на одинарные (или на &quot;,), чтобы не было конфликта с закрывающими кавычками javascript:

<a href="javascript: if (window.getSelection) selected = window.getSelection(); else if (document.getSelection) selected = document.getSelection(); else selected = document.selection.createRange().text; q = &quot;&quot;+selected; if (q) location=&quot;http://www.google.com/search?q=&quot;+encodeURIComponent(q);  void 0; ">Искать выделенное</a>

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

После этого достаточно выделить текст на странице и кликнуть на закладку, чтобы найти выделенный текст в гугл.

Открытый документ может представлять собой фреймсет. При этом способы обращения к содержимому, использованные в нашем примере, работать не будут. Текст надо искать во фреймах, а не в текущем окне.

Есть несколько способов обойти эту проблему.

Если букмарклет не задуман для работы с фреймами - можно проверять их наличие и выводить предупреждение.

Для более надежной работы исключим ифреймы: в подавляющем большинстве сайтов они используются чисто технологически: в ajax, для обхода некоторых багов и тому подобное.

if(frames.length > document.getElementsByTagName('iframe').length)
  alert('Извините, фреймы не поддерживаются.');
else{
  /* код букмарклета */
}

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

Решение - рекурсивный обход фреймов:

function traverse(win){
  try{
    /* Работа с win.document */
    ...
  } catch(e){
    /* Ошибка доступа к фрейму */
  }

  /* Вызов traverse для вложенных фреймов */
  for(var i=0; i<win.frames.length; i++) {
      traverse(win.frames[i]);
  }
}
traverse(window);

Вызов traverse(window) рекурсивно обрабатывает(например, ищет выделение) все фреймы, начиная с текущего окна.

В нее добавлена конструкция try ... catch для обработки возможных ошибок безопасности браузера, которые происходят, если доступ к фрейму противоречит политике Same Origin. Например, когда ифрейм используется для показа рекламы с другого домена.

Так как букмарклет закрыт в двойные кавычки - желательно использовать в коде либо &quot;, либо одинарные.

Например, в букмарклете для поиска в гугл можно заменить все &quot; на одинарные кавычки. Тоже будет работать:

<a href="javascript: if (window.getSelection) selected = window.getSelection(); else if (document.getSelection) selected = document.getSelection(); else selected = document.selection.createRange().text; q = ''+selected; if (q) location='http://www.google.com/search?q='+encodeURIComponent(q);  void 0; ">Искать выделенное</a>

Если функция или операция присваивания возвращает значение - то, какое бы оно ни было, букмарклет перенаправит посетителя на новую страницу, которая показывает это значение.

Иногда это можно грамотно использовать. например показать сводку по ключевым словам в документе. Обычно же это значение перехватывают и обнуляют при помощи void. Типичное решение - поставить в конце букмарклета:

void 0;

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

<a href="javascript: (function(){ .... })()">переколбасить страницу</a>

Этот способ имеет еще тот бонус, что вы можете использовать локальные переменные и не загрязнять глобальную область видимости.

Букмарклет работает в глобальной области видимости.

Это значит, что даже переменная, объявленная с var, будет глобальной:

<a href="javascript: var a = 5; void 0">Запишет в window.a</a>

Чтобы это обойти - используют 2 способа.

Первый - назначить переменным уникальные имена типа aBBZZ. Это криво.

Второй - оборачивать букмарклет в анонимную функцию:

<a href="javascript:(function(){ var a = 5; })()">Запишет в локальную переменную</a>

При этом также отпадает необходимость в void.

Так выглядит поисковый букмарклет, обернутый в анонимную функцию:

<a href="javascript:(function(){ var selected; if (window.getSelection) selected = window.getSelection(); else if (document.getSelection) selected = document.getSelection(); else selected = document.selection.createRange().text; var q = ''+selected; if (q) location='http://www.google.com/search?q='+encodeURIComponent(q);})(); ">Искать выделенное</a>

В отличие от исходного варианта, он не загрязняет глобальную область переменными selected и q.

Число символов в букмарклете ограничено. Причем, оно варьируется не только от браузера к браузеру, но и между версиями.

Вот некоторые данные:

Браузер Максимальное кол-во символов
Netscape > 2000
Firefox > 2000
Opera > 2000
IE 4 2084
IE 5 2084
IE 6 508
IE 6 SP 2 488
IE 7 2084

Как видите, Internet Explorer 6.0 держит до 508 символов, а Internet Explorer 6.0 SP2 - еще хуже, всего лишь 488 символов. Так что, если вы хотите быть уверенными, что букмарклет запустится в IE6 - ограничьте его 488 символами.

Это ограничение не относится напрямую к размеру скрипта в <a href="javascript:...">. Оно срабатывает когда букмарклет добавляют в избранное. Вы можете сделать замечательный букмарклет, он будет работать на странице, но при добавлении в избранное код будет обрезан.

Чтобы это обойти, букмарклет в IE может подключать внешние скрипты:

...
var script=document.createElement('script')
script.src='http://my.bookmarklet.ru/myscript.js'
document.getElementsByTagName('head')[0].appendChild(script)
...

Альтернативный подход - разрабатывать букмарклет только для "Продвинутых браузеров". Это работает, если букмарклет представляет собой полезный инструмент, ради которого не лень и браузер сменить.

Например, многие SEO'шные букмарклеты сделаны именно так. Хочешь использовать - поставь FF и инструмент к твоим услугам.

Успешного плагинописания!


Автор: Ajit Agarwal (не зарегистрирован), дата: 7 сентября, 2021 - 12:22
#permalink

Love to read this beautiful post. Satta King


Автор: Гость (не зарегистрирован), дата: 8 сентября, 2021 - 10:34
#permalink

Very nice website as well as nice article, i must say. thank you


Автор: 안전놀이터모음 (не зарегистрирован), дата: 10 сентября, 2021 - 11:24
#permalink

What a nice post! I'm so happy to read this. 안전놀이터모음 What you wrote was very helpful to me. Thank you. Actually, I run a site similar to you. If you have time, could you visit my site? Please leave your comments after reading what I wrote. If you do so, I will actively reflect your opinion. I think it will be a great help to run my site. Have a good day.


Автор: 먹튀검증 (не зарегистрирован), дата: 21 сентября, 2021 - 05:01
#permalink

Awesome article! I want people to know just how good this information is in your article. It’s interesting, compelling content. Your views are much like my own concerning this subject 먹튀검증 It touched me a lot. I would love to hear your opinion on my site. Please come to the site I run once and leave a comment. Thank you.


Автор: 안전놀이터 (не зарегистрирован), дата: 21 сентября, 2021 - 15:26
#permalink
<a href="https://politicadeverdade.com/"> <a href="https://politicadeverdade.com" title="안전놀이터">안전놀이터 </a></a> [Spotv News = Reporter Kim Gun-il] Juventus coach Masimiliano Allegri has been controversial for swearing at the players since his defeat.

Автор: 안전놀이터 (не зарегистрирован), дата: 21 сентября, 2021 - 15:27
#permalink

안전놀이터 [Spotv News = Reporter Kim Gun-il] Juventus coach Masimiliano Allegri has been controversial for swearing at the players since his defeat.


Автор: Гость (не зарегистрирован), дата: 24 сентября, 2021 - 04:33
#permalink

Your forum posts always make me beneficial, so it was a time to build my knowledge by referring to them. Thank you so much for helping me develop my blog.메이저토토사이트


Автор: 토토사이트 (не зарегистрирован), дата: 28 сентября, 2021 - 06:25
#permalink

There seems to be no point in discussing the subject any longer. The reason is that this article is going to be the end. I've read a lot of articles with the same content, but this is the first time I've read something like this. 먹튀사이트 You are the best.


Автор: 토토사이트 (не зарегистрирован), дата: 28 сентября, 2021 - 06:25
#permalink

There seems to be no point in discussing the subject any longer. The reason is that this article is going to be the end. I've read a lot of articles with the same content, but this is the first time I've read something like this. 먹튀사이트 You are the best.


Автор: 토토사이트 (не зарегистрирован), дата: 28 сентября, 2021 - 06:26
#permalink

It seems that your site optimization is very complete. I'm sorry it's not related to the post. I am very interested in site optimization. I want to talk about optimization. Thank you for coming with 메이저사이트


Автор: magosucom77 (не зарегистрирован), дата: 3 октября, 2021 - 03:49
#permalink

Thanks for your posting. Onne other thing iis when you
are advertising your property yourself, one of tthe concerrns yoou
need to be mindful of upfront is when to deal with house
inspection reviews. As a FSBO seller, the keey concerning successfully switching your property along with saving money
on real estate agent profits is expertise. The more you understand, the
softer your property sales effort will be. One area that
this is particularly significant is information about home inspections.Click Me Here사설경마

6YAGKIE


Автор: 메이저토토사이트추천 (не зарегистрирован), дата: 7 октября, 2021 - 10:22
#permalink

That's a really impressive new idea! 메이저토토사이트추천 It touched me a lot. I would love to hear your opinion on my site. Please come to the site I run once and leave a comment. Thank you.


Автор: 메이저토토사이트추천 (не зарегистрирован), дата: 7 октября, 2021 - 10:24
#permalink

That's a really impressive new idea! 메이저토토사이트추천 It touched me a lot. I would love to hear your opinion on my site. Please come to the site I run once and leave a comment. Thank you.


Автор: 메이저토토사이트추천 (не зарегистрирован), дата: 7 октября, 2021 - 10:24
#permalink

That's a really impressive new idea! 메이저토토사이트추천 It touched me a lot. I would love to hear your opinion on my site. Please come to the site I run once and leave a comment. Thank you.


Автор: dishwasher repair frisco, tx (не зарегистрирован), дата: 22 октября, 2021 - 15:52
#permalink

This is quality content, very informative. Thank you for sharing.


Автор: dishwasher repair frisco, tx (не зарегистрирован), дата: 22 октября, 2021 - 15:54
#permalink

This is quality content, very informative. Thank you for sharing.


Автор: soi keo (не зарегистрирован), дата: 24 октября, 2021 - 05:54
#permalink

We stumbled over here by a different website and thought I might check things out. I like what I see so now i am following you. Look forward to finding out about your web page again. soi keo


Автор: 토토사이트 (не зарегистрирован), дата: 1 ноября, 2021 - 06:28
#permalink

It seems that your site optimization is very complete. I'm sorry it's not related to the post. I am very interested in site optimization. I want to talk about optimization. Thank you for coming with 메이저사이트


Автор: 먹튀검증 (не зарегистрирован), дата: 1 ноября, 2021 - 06:29
#permalink

Before reading this article, I had a different opinion. Now that has changed. It was very impressive.먹튀검증 and a different point of view I will learn once more.


Автор: 먹튀검증 (не зарегистрирован), дата: 1 ноября, 2021 - 06:32
#permalink

Thank you for very good information. May I ask for more information?? This is too helpful information for me. I think you are probably interested in 머니상 as well. The above information is on my blog, so please feel free to visit


Автор: 토토사이트 (не зарегистрирован), дата: 2 ноября, 2021 - 09:27
#permalink

Here's an article that will make you wonder what kind of post you're going to write. I would be very grateful if you could upload it as soon as possible. Also, I would like to share inspiration with each other, but it would be an honor to visit us with 먹튀검증사이트 when you have time.


Автор: Гость (не зарегистрирован), дата: 5 ноября, 2021 - 16:26
#permalink

Helpful information. Lucky me I found your site by accident, don't forget to read the story of logo mustang to have a better understanding of the brand


Автор: Гость (не зарегистрирован), дата: 5 ноября, 2021 - 16:28
#permalink

Helpful information. Lucky me I found your site by accident, don't forget to read the story of logo mustang to have a better understanding of the brand


Автор: dixilo (не зарегистрирован), дата: 8 ноября, 2021 - 12:07
#permalink

Thanks for your helpful information. I have been struggling to find many questions about this issue. I will follow you! basketball legends


Автор: keo nhacai (не зарегистрирован), дата: 19 ноября, 2021 - 10:44
#permalink

I've been using WordPress on a number of websites for about a year and am worried about switching to another platform. I have heard good things about keo nhacai. Is there a way I can transfer all my wordpress content into it? Any help would be really appreciated!


Автор: keonha cai (не зарегистрирован), дата: 22 ноября, 2021 - 10:24
#permalink

Really no matter if someone doesn't be aware of after that its up to other users that they will help, so here it takes place keonha cai.


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

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
1 + 5 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum