Всем привет, сегодня речь пойдет про использование букмарклета, или закладки для браузера.
Кто не знает, это такая штука, которую можно добавить в закладки (да, я сегодня дебютирую в роли Капитана Очевидность:) и, при нажатии на нее, произвести какой-нибудь эффект.
Примером может служить герой сегодняшней заметки, который расположен по адресу http://ulizko. com/demo/allthat/ . Инструкция по применению:
Появится окошко, в которое можно ввести данные. Вообще, предполагается, что это будет интерфейс добавления желаний в вишлисты (предварительно созданные на каком-то сайте), настроить триггеры оповещений, и прочее. Есть даже какая-то валидация начального уровня. И налажен обмен данными с сервером - то есть, на любом домене к вам приходит список ваших вишлистов, а ваше новое желание с любого домена долетит на крыльях любви к вишлисту и уютно устроится в его объятьях .
Но. Мы сегодня не об этом, а о том, как делать такие штуки в принципе.
Прежде чем перейти непосредственно к разбору кода, хотелось бы ответить на вопрос (который мне никто не задавал:), а именно, "Какие возможности дает букмарклет?". Правильный ответ - любые. Так как мы получаем возможность подгрузить любой скрипт, мы можем сделать с клиентской страничкой все, что угодно. Например - сделать «выносной» виджет, в котором на любой страничке можно будет добавить запись в блокнот или таскменджер. Или вообще сделать весь таскменеджер выносным. Что тоже важно, они будут работать практически везде - это не плагины к firefoxу и не виджеты к opera. Букмарклетам не важно (ну, почти:), какая у вас ОС или браузер. В общем, есть простор для фантазии.
Итак, как же делать эти самые букмарклеты?
Очень просто: надо создать на страничке элемент anchor с атрибутом href, содержащим javascript-код. Если перевести на русский, то надо сделать вот такую ссылку, адрес которой, по большому счету, и будет букмарклетом:
Для того, чтобы javascript код в адресе ссылки заработал, надо добавит перед ним слово javascript: . Если мне не изменяет мой склероз, это называется «указание псевдопротокола javascript». Еще одна важная деталь - если ваш код вернет какое-то значение, то браузер воспримет его в качестве адреса, по которому нужно перейти, и уйдет с текущей страницы. Чтобы избежать этого, не возвращайте значения, то есть допишите в конец скрипта void 0; , либо оберните весь код в анонимную функцию, невозвращающую значения - (function(){... ваш код мог бы быть здесь...})() .
В любом случае, все эти вопросы подробно рассмотрены у Ильи Кантора в его заметке Букмарклеты и правила их написания , к которой я вас и отсылаю за подробностями.
Единственную вещь, которую нам еще нужно знать - это то, что все браузеры ограничивают максимальную длину кода букмарклета. И, подобно тому, как скорость каравана равна скорости самого медленного верблюда, так и максимальный размер кроссбраузерного букмарклета равен ограничению, наложенному IE 6 SP2, то есть, 488 символам.
Таким образом, вряд ли мы сможем закодить какую-то комплексную логику в неполных пятистах символах, так что чаще всего букмарклеты просто создают новый тэг script, в который уже сгружают код приложения.
Так поступил и я. Вот код моего букмарклета в человекоадаптированном виде:
(function () {* This source code was highlighted with Source Code Highlighter .
Потом подгружается непосредственно код самого окошка. Думаю, он может представлять некий интерес сам по себе, так что и его я сюда запощу (все комментарии идут на английском, так как заказчик американец):
Если интересно, вот
Объект Bookmark – это просто закладка. На практике это – самый удобный способ навигации по документам, созданных при помощи шаблонов (например, отчетов). Принципиальное отличие его от объектов Selection и Range заключается в том, что все выделения и диапазоны теряются при закрытии документа (объекты Range вообще существуют только во время работы создавшей их процедуры, а закладки сохраняются вместе с документом. Если документ создан на основе шаблона, то все закладки, которые были определены в шаблоне, будут определены и в созданном на основе этого шаблона документе.
Создать закладку (меню Вставка -Закладка ) намного проще, чем считать количество символов для объекта Range от начала документа/абзаца/предложения, или выполнять операции Move() (MoveDown(), MoveRight(), MoveNext()) для объекта Selection.
Функциональность объекта Bookmark невелика. Свойств и методов у этого объекта намного меньше, чем у объектов Selection и Range. Однако обычно никто и пытается использовать объект Bookmark для работы с текстом напрямую. Из объекта Bookmark очень просто получить объект Selection (при помощи метода Select()) или объект Range (при помощи свойства Range()) – и дальше можно пользоваться уже свойствами и методами этих объектов, например:
ThisDocument.Bookmarks("Bookmark1").Select
MsgBox Selection.Text
Создавать объекты Bookmark программным способом необязательно, но если есть необходимость, то можно использовать метод Add() коллекции Bookmark:
ThisDocument.Bookmarks.Add Name:="temp", Range:= Selection.Range
У этого метода – всего лишь два параметра, оба которых используются в примере.
Некоторые важные свойства объекта BookmarkEmpty – если это свойство возвращает True, то это значит, что закладка указывает на точку вставки, а не та текст;
Name – имя закладки. Очень удобно, что найти нужную закладку в коллекции закладок можно не только при помощи индекса (номера) закладки, но и по ее имени.
Range – возвращает объект Range на месте этой закладки.
Start, End, StoryType – аналогично таким же свойствам у объекта Selection.
Методов у объекта Bookmark всего три – Copy(), Delete() и Select(). Copy() – создает закладку на основе существующей, Delete() – удаляет ее, а Select() – выделяет то, на что ссылается закладка.
Объект Word.Range, программная работа с диапазоном в документе, свойства и методы объекта Range, преимущества по сравнению с объектом SelectionКак уже говорилось выше, чаще всего разработчиками для определения места ввода текста и навигации по документу используется объект Selection. Для этих же целей можно использовать и объект Range. Главное отличие между объектами Range и Selection заключается в том, что объект Selection может определить и пользователь (выделив текст мышью), а объект Range можно определить только программно, и он не зависит от текущего положения указателя или действий пользователя.
Формальное определение объекта Range выглядит так: это программный объект, который представляет непрерывный участок текста в документе. Этот объект не зависит от объекта Selection – вы можете работать с объектом Range, не изменяя текущего выделения. Он может не включать в себя ни одного символа (представлять курсор ввода текста).
Объектов Range в каждый момент времени может быть сколько угодно, а объектов Selection – только один.
Управлять содержимым html страницы можно при помощи букмарклета. В данной заметке опишу простые примеры букмарклета и его использование для заполнение веб форм.
Для написания статьи использовался Crome, возможно в других браузерах есть свои особенности. Самым простым примером использования букмарклета является отображение сообщения в браузере. Для этого, например, можно открыть www.google.ru и после открытия страницы в строку адреса вместо www.google.ru ввести такой код
Javascript:alert("Привет мир");
И нажать Enter, в окне браузера появится сообщение
Что бы не вводить код постоянно в строку адреса браузера и иметь его постоянно под рукой возможно добавить код этой функции в закладки.
Для это есть несколько вариантов, опишу два из них. Первый создать закладку вручную в меню создания закладок, второй написать html страницу со специально оформленной ссылкой, которую перетащить мышью на панель закладок.
Рассмотрим первый вариант. В Chrome зайдите в меню закладок.
В нем нажмите кнопку "Изменить". И в появившемся окне введите название для закладки и код функции.
После этого нажимаете кнопку "Сохранить". Теперь эта закладка появляется в панели закладок. И для вызова этой функции можно на любой странице нажать на эту закладку.
Рассмотри второй вариант добавления закладки из html страницы. Для этого создадим пустой текстовый файл с названием AddBookmark.html. и вставим в него следующий код:
AddBookmark Сообщение "Привет мир!"
Особенностью ввода JavaScript кода является замена кавычек на их символьное описание ". Теперь откройте страницу в браузере.
Ссылка на букмарклет выделена синим, мышкой перетащите её на панель закладок, если панель закладок не отображается то это можно поправить - https://support.google.com/chrome/answer/95745?hl=ru
1.Изменение цвета фона. В фал html добавьте еще одну ссылку
Серый фон
Перетащите её на панель закладок. При запуске закладки на странице www.google.ru получится такой результат:
2.Заполним данные в текстовом поле и поменяем его класс.
Для заполнения текстовых полей, нажатий на кнопку необходимо знать или их name или id. Что бы найти имя поля нужно на него нажать правой кнопкой мыши и выбрать "Посмотреть код". В правой части окна появиться окно с кодом и выделенным текстовым элементом.
Заполнение гугл поиска
В нашем случае меняется класс текстового поля на MyClass и он заполняется текстом "Привет мир!".
Добавим новую закладку на панель задач. И перейдём на www.google.ru выполним букмарклет и в результате получим.
Для проверки изменения класса опять откроем код элемента, ранее класс был такой class =" gsfi " теперь class ="MyClass "
Все знают, что типы ссылок описывают взаимосвязь между двумя или более страницами на сайте. Определение типа ссылки полезно для SEO, так как позволяет поисковым системам лучше понимать ваш сайт. Так же они могут объяснять причину, почему эта ссылка присутствует на данной странице и дать поисковому роботу гораздо больше информации, чем вы можете подумать.
Краткий перечень типов ссылок| alternate | альтернативный способ отображения страницы |
| author | За ссылкой подробная информация об авторе |
| bookmark | Постоянная ссылка |
| help | Справка или информация помогающая с какой-то частью сайта или контента |
| license | Ссылка на информацию об авторском праве |
| nofollow | Ссылка, которую вы не рекомендуете. Возможно вы ее разместили их корыстных мотивов |
| prefetch | Ресурс, который скорее всего заинтересует пользователя. Сообщает браузеру, что его можно заранее поместить в кэш |
| search | Поиск по сайту |
| tag | Ключевое слово или название категории сайта |
| next | Ссылка на следующую страницу |
| prev | Ссылка на предыдущую страницу |
Для определения типа используется атрибут rel
rel=alternate
Тип alternate указывает на то, что по этой ссылкой идет альтернативный вид отображения страницы. Например, это может быть PDF версия, или версия оптимизированная для печати.
PDF версия страницы
Так же у этого типа можно задать hreflang , который указывает на то, что по этой ссылкой идет страница другой языковой версии.
English version
rel=author
Этот тип сообщает, что за ссылкой находиться подробная информация об авторе сайта или страницы.
Постоянная ссылка на страницу автора
rel=help
Ссылка данного типа ведет к контенту справочного характера. Но есть важный момент. Help-ссылка контекстно-зависимая. Браузер сопоставит эту справочную информацию с родительским контейнером, в котором была размещена эта ссылка.
Ваш комментарий: Помощь по комментариям
rel=license
Этот тип может использоваться когда ссылка ведет на лицензионное соглашение основного контента данной страницы. Ссылка данного типа должна быть размещена в пределах тега main сайта. Лицензионное соглашение относится только к тому контенту, которое размещено в пределах этой секции. Оно не будет относится к тому, что например у вас в подвале.
Лицензия
rel=nofollow
Этот тип сообщает, что поисковому роботу не следует воспринимать эту ссылку как ссылку, которую рекомендует публицист
Робот, не переходи на эту страницу
rel=prefetch
Ссылки этого типа следует использовать когда вы ссылаетесь на некие внешние ресурсы, которые пользователь скорее всего откроет. Браузер закеширует заранее эту ссылку и она откроется очень быстро без всяких ожиданий.
Это обязательно нужно прочитать
rel=search
Этот тип сообщает, что ссылка ведет на интерфейс поиска
Открыть поиск на сайте
Эта страница относится к странице поиска
rel=next и rel=prev
Указывает и используется в постраничной навигации. Ссылка на следующую страницу имеет тип next , а на предыдущую – prev
