Букмарклет: разбор существенных моментов, часть первая
Как известно, букмарклет это небольшой javascript-код который, будучи сохраненным в закладках браузера, используется для выполнения каких либо действий над содержимым текущей веб-страницы.Но почему в названии поста: часть первая? Потому, что современный букмарклет «с блэк джеком и шлюхами»* обычно состоит из нескольких взаимодействующих частей:
первая часть букмарклета, которая является собственно букмарклетом это компактный javscript-код — не более 2000 символов, главная, но не единственная задача которого загрузить вторую часть; вторая часть букмарклета: это javscript-код произвольного размера, который выполняет всю оставшуюся работу; резервная часть букмараклета — которая запускается в действие, если вторая часть букмарклета не загрузилась. И, как вы уже наверняка догадались, в данной публикации речь пойдет о первой части букмарклета, Часть первая обычно выполняет следующие нехитрые действия:
Определяет переменные, которые будут использоваться в букмарклете. Инициирует начало работы букмарклета или прекращает его работу с уборкой всего внедренного на чужую страничку в режиме вкл. / выкл., а также проверяет особые условия выполнения букмарклета. Подключает индикатор загрузки, чтобы пользователь не нервничал, пока все богатство функциональности продолжает загружаться. Подгружает вторую часть букмарклета которая обеспечивает выполнения всей дальнейшей работы. Если вторая часть букмарклета не может быть подгружена, получает данные на текущей странице, необходимые для передачи в резервную часть букмарклета Вызывает резервную часть букмарклета и передает ей необходимые данные. Для краткости предмет публикации первую часть букмарклета далее будем просто называть: букмарклет.Реальный примерВ качестве примера «из реальной жизни» воспользуемся букмарклетом веб-сервиса TheOnlyPage (сервис хранения закладок, заметок и html-фрагментов).Чтобы установить букмарклет в ваш браузер достаточно перейти на страничку справочной системы TheOnlyPage и перетянуть соответствующую ссылку на панель закладок браузера.
К выполнению букмарклета можно перейти проделав следующие 4 шага:
Шаг 1: Кликнуть на ссылку букмарклета, если вы еще не входили в TheOnlyPage, то переходите к Шагу 2, если уже вошли, то сразу к заключительному Шагу 4.
Шаг 2: Нажать на кнопку Войти в TheOnlyPage в открывшейся форме.
Шаг 3: В результате, в отдельном окне отображается форма входа. Для быстрой регистрации / входа можно воспользоваться кнопками входа через социальные сервисы.
Шаг 4: Отображается форма сохранения закладки / заметки / html-фрагмента (картинки) получаемых с текущей просматриваемой страницы.
Tеперь пройдемся по javascript-коду букмарклета и увидим как все происходит.
Код букмарклета следующий:
javascript:(function (){var w=this, d=w.document, l=w.location, u=l.hostname, s=w.getSelection (), g=d.getElementById ('theonlypageAjaxLoaderGif'), e=encodeURIComponent, i, r, c=''; if (u==='www.theonlypage.com'){return void (0);}if (g){g.parentNode.removeChild (g); return void (0);}g=new Image (); d.body.appendChild (g); g.id='theonlypageAjaxLoaderGif'; g.style.cssText='position: fixed; z-index:2147483647'; g.style.left=Math.floor ((w.innerWidth-66)/2)+'px'; g.style.top=Math.floor ((w.innerHeight-66)/3)+'px'; g.src='//d2wlh3lh0sssu9.cloudfront.net/img/ajax-loader.gif'; r=d.createElement ('script'); r.src='//d2wlh3lh0sssu9.cloudfront.net/js/mini.bookmarklet.js'; r.async=true; r.addEventListener ('error', function (){if (s.rangeCount){c=d.createElement ('div'); for (i=0; i