Что такое букмарклет

Букмарклет — это специальная закладка. От обычной закладки букмарклет отличается тем, что содержит не ссылку на документ, а специальный JavaScript-код.

Чтобы создать букмарклет, надо просто завести соответствующую закладку. Чтобы запустить букмарклет на выполнение, надо перейти по этой закладке. При этом выполнится соответствующий JavaScript-код, который в большинстве случаев, вызовет не переход на другую страницу, а некоторые манипуляции с текущей открытой в браузере web-страницей.

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

Букмарклеты имеют существенное ограничение: они не работают на страницах, загруженных по HTTPS. Это ограничение предусмотрено в брузерах из соображений безопасности.

Разновидности букмарклетов

Простейшие букмарклеты полностью умещаются в текст «ссылки»

Вот простейший пример — букмарклет, подсчитывающий количество ссылок на странице.

javascript:alert(document.getElementsByTagName('a').length)

Вы можете добавить его в закладки, используя эту ссылку: количество ссылок

К сожалению, большинство браузеров не позволяют сделать закладку, не перейдя по ссылке, а перейти по ссылке букмарклета, естественно, нельзя. Поэтому, чтобы создать букмарклет, вам придётся воспользоваться меню управления закладками вашего браузера.

Бкумарклет, удаляющий все картинки на странице

javascript: name="E" .prototype.slice.call(document.getElementsByTagName('img')).forEach(function(e) {e.parentNode.removeChild(e);});

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

Сделать картинки принудительно маленькими

javascript: name="E" .prototype.slice.call(document.getElementsByTagName('img')).forEach(function(e){var x=e.style;x.width='50px';x.float='right';x.clear='both';});

Этот букмарклет поступает с картинками довольно радикально: назначает им всем одинаковую ширину и отправляет их все плавать вправо. Часто это делает страницу на много читабильней на устройствах с маленьким экраном. Хотя шарм может пострадать.

Загружаемые букмарклеты

Для реализации сложной функциональности, требующей объёмного JavaScript-кода, удобно использовать загружаемые букмарклеты.

При этом букмарклет-загрузчик может выглядеть так

javascript:(function(a){a.body.appendChild(a.createElement("script")).src="адрес"})(document);

Data-букмарклеты

Это не совсем букмарклеты в классическом понимании. Они не содержат JavaScript-кода, или содержат его косвенно.

Такой букмарклет содержит полный документ. Хороший пример — редактор в окне браузера в одну строку:

data:text/html,

Сделайте этот код адресом закладки и простой редактор всегда под рукой.