webew
Войти » Регистрация
 
JavaScript

Букмарклеты - JavaScript в адресной строке

25 сентября 2008, 15:12

Букмарклет (bookmarklet) — небольшая JavaScript-программа, сохраняемая как браузерная закладка.

Вышеприведенное определение взято из статьи в Википедии. Разберемся более подробно что же такое букмарклеты.

Современные браузеры поддерживают несколько протоколов. Наиболее часто нами используется протокол http, для получения гипертекстовых документов. Реже используется ftp-протокол для обмена файлами, а вот о протоколе javascript слышали немногие. Адрес, записанный в протокоде javascript выглядит так:

javascript: /*здесь любой js-код в одну строку*/alert('I am bookmarklet!');

В результате помещения этого адреса в адресную строку браузера выполнится следущий за javascript: js-код. В данном случае мы увидим окно-предупреждение с текстом 'I am bookmarklet!'. Как и любой другой адрес, javascript-адреса можно размещать в обычных ссылках и добавлять в закладки.

Безопасность

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

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

У браузеров есть ограничение на длину букмарклетов, причем у каждого браузера оно свое. Экспериментальным путем автор выяснил, что самой жесткое ограничение у IE (Internet Explorer) — 500 символов. У остальных браузеров тоже есть лимит, но он больше и автор поленился его высчитывать.

Таким образом, при написании букмарклета лучше максимально сокращать имена переменных и функций. В идеале до одного символа.

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

И последнее. Удобно записывать код в виде анонимной функции, вызываемой сразу после объявления, чтобы не получилось пересечения переменных букмарклета с переменными на странице.

Учитывая всё вышеперечисленное напишем простой букмарклет, который будет выводить адреса всех подключенных CSS-файлов на странице.

Показать CSS-файлы, подключенные к данной странице

Код этого букмарклета, разнесенный на несколько строк для удобства чтения:

(function() {
    var d,b,c,cs,s,i;
    d=document;
    b=d.body;
    if(!b) return;
    s=document.getElementsByTagName('link');
    if(!s.length) return;
    c=d.createElement('span');
    cs=c.style;
    cs.position='absolute';
    cs.top=cs.left=0;
    cs.background='#EEE';
    for (i=0;i<s.length;i++)if(s[i].type=='text/css')
    c.innerHTML+='<a href=\''+s[i].href+'\'>'+s[i].href+'<\/a><br>';
    b.appendChild(c);
    window.scrollTo(0,0);
})();

Можно выполнить сложные скрипты размером более 500 символов. В коде букмарклета вы можете подключить внешний js-файл с любого хоста, код которого сделает то, что вам нужно. К примеру, клик по этой ссылке подключит файл http://2007.fastcoder.ru/js/test.js, в котором алерт строки 'test'.

Код:

(function() {
    var script=document.createElement('script');
    script.src='http://2007.fastcoder.ru/js/test.js';
    document.body.appendChild(script);
})();

Удачи в написании букмарклетов!


// Все права на статью JavaScript::Букмарклеты - JavaScript в адресной строке принадлежат сайту 2007.fastcoder.ru
Добавить комментарий
Отображение комментариев: Древовидное | Плоское

1234ru

Цитата:
В коде букмарклета вы можете подключить внешний js-файл со всего хоста

Что значит "со всего"?
В смысле, со своего?
То, что не убивает нас, делает нас инвалидами.
25.09.2008, 16:57
Ответить

bur

Ага, очепятка. Поправил, теперь "с любого". :-)
25.09.2008, 17:02
Ответить
NO USERPIC

Octane

Для стилей можно использовать метод «cssText»:
c=d.createElement('span');
c.style.cssText = 'position: absolute; top: 0; left: 0; background: #eee;';

так помоему удобней и короче.
02.10.2008, 01:00
Ответить

bur

Поправка - не метод, а свойство.
Спасибо, так действительно удобнее.
02.10.2008, 13:13
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2024 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: