Букмарклеты или как скачать аудиофайлы с сайта vkontakte?
Сегодня я собираюсь рассказать про одну интересную технологию, как мне кажется, с большим будущим. Называется эта технология bookmarklets(букмарклеты).
Букмарклет – это маленькая JavaScript-программа, оформленная в виде javascript-ссылки и вызываемая как браузерная закладка. Итак, мы знаем, что в атрибуте href гипертекстовой ссылки можно указать url любой существующей страницы, обычно url этот выглядит примерно так <a href=’http://address.org/path/index.html’>ссылка</a>, в данном случае http: – это указание протокола обмена, а все остальное – указание сервера, пути к файлу, и имени файла, к которому обратится браузер после клика на ссылке. Так вот, существует ряд протоколов, таких как, например, http: (протокол гипертекстового обмена), ftp:(протокол обмена файлами), file:(протокол загрузки локальных файлов пользователя).
Помимо этого существует еще один интересный протокол javascript:, который мы и будем использовать для создания букмарклетов. Выглядит это примерно так:
<a href=’javascript:alert(‘Hello, world’);’>букмарклет</a> при щелчке по этой ссылке, выполнится команда alert(‘Hello, world’); Проверьте, как это работает.
Попробуем теперь перетащить эту ссылку в панель закладок браузера, или щелкнув на ней правой кнопкой добавить ее в закладки. После того, как ссылка сохранена в закладки, можно в любой момент выбрать ее и выполнить.
Попробуем немного усложнить нашу закладку, пусть тепреь она выводит адрес документа из которого она вызвана. Вот этот букмарклет:
<a href=’javascript:alert(document.location);’>Адрес текущей страницы</a>.
Добавьте эту ссылку (Адрес текущей страницы) в закладки и вызовите ее, открыв предварительно в браузере какую-нибудь интернет-страницу, например сайт Яндекса. Вы увидите всплывающее оповещение с указанием адреса текущей страницы. Из этого можно сделать один очень важный вывод: букмарклет, вызванный из браузера, как закладка, выполняется в контексте текущей, открытой в браузере страницы. А этот факт дает нам неограниченный доступ к изменению данных на странице, и к извлечению из страницы любых данных, вплоть до полной замены содержимого этой страницы.
К сожалению, длина скрипта, сохраняемого в закладке ограничена. Причем, для разных браузеров она разная. Не углубляясь в различия между браузерами, можно сказать, что длина эта ограничена для различных браузеров от 488 до 2084 символов, что не может не огорчить. В принципе, для несложных букмарклетов нам хватит и этой длины, но что делать, если нам хочется большего? Что если мы хотим написать скрипт, который производит достаточно сложную обработку загруженной страницы, и в 2 кБ скрипта нам никак не уложиться?
Для этого можно использовать способ, заключающийся в следующем: сам букмарклет представляет собой небольшой скрипт, у которого есть лишь одно предназначение – загрузить основной скрипт и запустить его на выполнение.
Созданием этого скрипта мы сейчас и займемся. Но для начала замечу вот что. Какой бы скрипт мы ни создавали, практически всегда в нем мы будем объявлять создание новых функций и новых переменных. А создаваться они будут в контексте загруженной пользователем страницы, где до нас уже могут существовать какие-либо переменные и функции. Понятно, что мы никак не можем предугадать, какие имена будут у этих переменных, а значит, создавая свои собственные, мы можем случайно переопределить уже существующие переменные, внеся тем самым непредсказуемые изменения в логику работы пользовательских скриптов. Таким образом, запустив букмарклет, помимо его полезной работы, мы можем получить и совершенно непредсказуемые побочные явления, связанные с перопределением переменных.
Самый удобный способ избавиться от этих эффектов – применить анонимную функцию. Анонимные функции определяются также как и именованные, за исключением того факта, что им не присваивается имя.
Простое объявление функции:
function fun2(x) { return x + 1; }
Объявление функции, как переменной:
var fun2 = function(x) { return x + 1; }
К обеим этим функциям мы можем обратиться одинаково:
alert(fun1(5));
alert(fun2(5));
Мы получим абсолютно идентичное поведение. Такая же анонимная функция объявляется так:
function(x) { alert(x); }
Однако, если ее просто объявить, то толку от нее не будет никакого. Чтобы от любой функции была польза – ее надо вызвать. Вызов анонимной функции всегда совмещен с ее объявлением, для этого полностью все объявление функции берется в круглые скобки, после которого также в круглых скобках приписываются все ее аргументы вызова:
(function(x) { alert(x); })(5);
А для функции без аргументов – вот так:
(function() { alert('Я функция!'); })();
К чему мы городили весь этот огород? А к тому, что новая область видимости переменных в JavaScript возникает только в одном единственном случае – при объявлении функции. Таким образом, если в функции объявить переменную, то ее имя не перекроется с таким же именем, но объявленным в глобальном контексте. Поясню на примере:
var a = 5; (function(){ var a = 10; alert(a); // alert(10) })(); alert(a); // alert(5)
Как видим второй вызов alert дал значение 5, а не 10, потому что переменная a = 10 Объявлена в другом контексте видимости. В дальнейшем при создании букмарклетов мы всегда будем использовать анонимные функции – они обеспечивают гарантию от побочных явлений за счет добавления всего 17 лишних символов скрипта (function(){})(); а весь код встраивается между фигурными скобками.
А вот теперь пора переходить к анонсированному чуть ранее загрузчику скриптов. Делать это мы будем вот так:
var script = document.createElement('script'); script.src = 'http://script_url.js'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script);
Как видим здесь нет ничего сложного: при помощи createElement создается элемент SCRIPT, этому элементу задаются необходимые параметры src и type (в src указывается полный url загружаемого скрипта), и, наконец, скрипт при помощи appendChild добавляется в конец раздела HEAD страницы. После этого он тут же начинает загружаться с сервера, и сразу после загрузки – выполняется.
Замечу сразу, что текст скрипта всего букмарклета должен быть собран в единую строку без переносов, чтобы он выглядел как ссылка и его можно было добавить в закладки.
Покажем это на простом примере. Ниже приведен простой букмарклет, загружающий с сервера скрипт и выполняющий его:
<a href=”javascript:(function(){var script=document.createElement(‘script’); script.src=’http://easy-4-web.ru/samples/bookmarklet/3_loaded/script.js’; document.getElementsByTagName(‘head’)[0].appendChild(script)})();”>Загрузить букмарклет</a>
А вот и сам готовый букмарклет: Загрузить букмарклет просто перетащите его в закладки и запустите. Он загружает с адреса http://easy-4-web.ru/samples/bookmarklet/3_loaded/script.js скрипт в котором – очень простое содержимое:
(function(){ alert('Hello, world!'); })();
Да, после запуска букмарклета, мы увидим все то же сообщение “Hello, world!”.
Перестанем, наконец, писать бесполезные букмарклеты и сделаем хоть что-нибудь полезное, чтобы оценить всю мощь и красоту букмарклетов.
Я собираюсь сделать несложный букмарклет, который позволит мне легко и удобно сохранять аудиозаписи с сайта vkontakte.ru. Покопавшись немного в исходниках HTML-страниц сайта, я обнаружил, что при нажатии кнопки PLAY любой из аудиозаписей, происходит вызов функции operate, в которую в качестве параметров передаетсся либо url mp3-файла аудиозаписи, либо несколько параметров, указывающих на имя сервера медиаконтента, ID пользователя и ID файла аудиозаписи из которых путем конкатенации легко составить полный url аудиофайла.
Таким образом, моя идея заключается в следующем: после запуска букмарклет ищет на странице все кнопки PLAY (обычно они имеют class=’playimg’ или class=’play’), затем рядом с каждой такой кнопкой создает ссылку на аудиофайл, url к которому скрипт извлекает из атрибута onClick кнопки PLAY путем несложных текстовых преобразований.
Как видим, здесь напрямую придется работать с DOM-структурой, а мне очень не хотелось бы писать на низкоуровневом JavaScript все эти поиски элементов, извлечение из них атрибутов и создание новых элементов в существующем дереве DOM. Я собираюсь использовать для этого фреймворк jQuery.
Подгрузку jQuery я собирался делать стандартным способом при помощи createElement и appendChild, однако столкнулся вот с какой трудностью – после команды appendChild скрипт начинает загружаться, и нет никаких гарантий по времени его загрузки, в любом случае если сразу после appendChild попытаться обратиться к объекту jQuery, то выскочит ошибка “jQuery not defined“. Возник вопрос, как отследить момент, когда jQuery уже загрузился и можно начинать с ним работать?
Я решил обойтись собственным рукотворным решение, которое заключается в следующем: сразу после appendChild я запускаю цикл отслеживания, который каждые 0,1 сек проверяет, существование объекта jQuery, и как только объект появляется, загрузчик прекращает цикл проверки и вызывает функцию обратного вызова, в теле которой и будет происходить вся обработка страницы.
Также мой загрузчик скриптов перед тем как загружать какой-либо скрипт, проверит, а существует ли уже в DOM-структуре script с совпадающим атрибутом src? И если такой скрипт уже есть то загрузка нового произведена не будет.
Чтобы не утомлять читателя подробным описание его работы, я просто приведу готовый скрипт загрузчика, оснащенный необходимыми комментариями:
var easybml = { // загружает скрипт loadJS: function(url) { var scripts = document.getElementsByTagName('script'), alreadyLoaded = false; for(var i=0; i<scripts.length; i++) { if(scripts[i].src == url) { alreadyLoaded = true; break; } } if(!alreadyLoaded) { var script = document.createElement('script'); script.src = url; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } }, // Загружает jQuery с заданного ресурса, после инициализации jQuery вызывает // событие complete loadJQuery: function(src, complete) { easybml.loadJS(src); // если передана функция обратного вызова, то сохраняем указатель на нее // и запускаем циклическую проверку инициализации jQuery if(complete) { easybml.prv.complete = complete; easybml.prv.checkJQuery(); } }, // секция закрытых данных, к этим методам обращаться не надо prv: { complete: null, // циклически проверяет загружен ли jQuery, и когда он загружен // вызывает функцию easybml.prv.complete checkJQuery: function() { if (typeof jQuery == 'undefined') { setTimeout('easybml.prv.checkJQuery()', 100); } else { easybml.prv.complete(); } } } }; (function(){ // загружаем jQuery, если он еще не загружен if (typeof jQuery == 'undefined') { easybml.loadJQuery('http://easy-4-web.ru/samples/bookmarklet/5_jquery/jquery.php', function() { // после загрузки и инициализации jQuery становятся доступными все // методы. Присоединяем к документу обработчик события onclick $(document).ready(function() { $("body").click(function() { alert("Hello world!"); }); }); }); } })();
Функция easybml.loadJS(url) загружает скрипт с адреса url, если скрипт с таким же src еще не был загружен.
Функция easybml.loadJQuery(src, complete) загружает скрипт фреймворка jQuery с адреса src, и после его успешной загрузки и инициализации вызывает функцию обратного вызова complete.
Как видим в данном примере вся полезная функциональность скрипта заключена в том, что он к элементу BODY документа присоединяет обработчик события OnClick, который при клике на странице выводит alert(‘Hello, world!’).
И наконец, остался последний шаг. Вот она – полная версия скрипта, позволяющего загрузить аудиозаписи с сайта vkontakte.ru:
var easybml = { // загружает скрипт loadJS: function(url) { var scripts = document.getElementsByTagName('script'), alreadyLoaded = false; for(var i=0; i<scripts.length; i++) { if(scripts[i].src == url) { alreadyLoaded = true; break; } } if(!alreadyLoaded) { var script = document.createElement('script'); script.src = url; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } }, // Загружает jQuery с заданного ресурса, // после инициализации jQuery вызывает событие complete loadJQuery: function(src, complete) { easybml.loadJS(src); // если передана функция обратного вызова, то сохраняем указатель //на нее и запускаем циклическую проверку инициализации jQuery if(complete) { easybml.prv.complete = complete; easybml.prv.checkJQuery(); } }, // секция закрытых данных, к этим методам обращаться не надо prv: { complete: null, // циклически проверяет загружен ли jQuery, и когда он загружен // вызывает функцию easybml.prv.complete checkJQuery: function() { if (typeof jQuery == 'undefined') { setTimeout('easybml.prv.checkJQuery()', 100); } else { easybml.prv.complete(); } } } }; (function(){ function clearQuotes(str) { return jQuery.trim(str).replace(/\'|\"/g,''); } function getMP3url(attr) { var parts = attr.split(","); if(parts.length == 3) { return clearQuotes(parts[1]); } else if(parts.length == 5) { return 'http://cs' + clearQuotes(parts[1]) + '.vkontakte.ru/u' + clearQuotes(parts[2]) + '/audio/' + clearQuotes(parts[3]) + '.mp3'; } else if(parts.length == 2) { return parts[0]; } return parts[3]; } // загружаем jQuery, если он еще не загружен if (typeof jQuery == 'undefined') { easybml.loadJQuery('http://easy-4-web.ru/samples/bookmarklet/ 5_jquery/jquery-1.4.4.min.js', function() { $(document).ready(function() { $(".playimg").each(function(n, el) { var container = $(el).parent(); container.width('auto'); var clickAttr = $(el).attr("onclick").toString(); container.append(("<a href='" + getMP3url(clickAttr) + "' border='0' target='_blank'><img src='http://easy-4-web.ru/samples/ bookmarklet/6_saveaudio/saveicon.png' border='0'></a>")); }); $(".play").each(function(n, el) { var container = $(el).parent(); container.width('auto'); var valueAttr = container.find('input').attr('value').toString(); container.append(("<a href='" + getMP3url(valueAttr) + "' border='0' target='_blank'><img src='http://easy-4-web.ru/samples/ bookmarklet/6_saveaudio/saveicon.png' border='0'></a>")); }); }); }); } })();
Здесь используется ряд вспомогательных функций:
clearQuotes(str) – Очищает строку str от обрамляющих пробелов и скобок,
getMP3url(attr) – Извлекает из атрибута attr собственно сам url аудиофайла,
Ну и наконец после объявления этих функций начинается непосредственно полезная работа скрипта – поиск на странице кнопок PLAY и добавление к ним ссылок на скачивание.
Полную версию букмарклета я разместил по адресу http://easyapi.ru/bml/vksaveaudio/.
Пользуйтесь на здоровье.
UPD 14.04.2011.
Сайт vkontakte изменил способ рендеринга страниц, содержащих проигрыватель audio-файлов. Они унифицировали отображение контейнера проигрывателя и теперь не требуется дополнительных плясок с бубном для различного рода страниц – теперь аудио-проигрыватель везде рендерится абсолютно одинаково, что дает возможность упростить скрипт. Ниже я приведу только текст основной функции скрипта, так как изменился только он. Скрипт стал короче, из него убраны все ветвления оператором if:
(function(){ function getMP3url(attr) { var parts = attr.split(","); return parts[0]; } if (typeof jQuery == 'undefined') { easybml.loadJQuery('http://easyapi.ru/bml/vksaveaudio/jquery-1.4.4.min.js', function() { $(document).ready(function() { $(".play_new").each(function(n, el) { var container = $(el).parent().parent(); container.width('auto'); var valueAttr = container.find('input'). attr('value').toString(); container.append(("<a href='" + getMP3url(valueAttr) + "' border='0' target='_blank'> <img src='http://easyapi.ru/bml/vksaveaudio/saveicon.png' border='0'></a>")); }); }); }); } })();
Кросдоменная передача данных между html-страницами
Итак, представим себе ситуацию, что на некотором сайте в некоторой форме есть поле, в которое нужно ввести логин пользователя, но не свой собственный, а чужой логин, предположим, пользователя, которого надо добавить в друзья или в черный список. Но посетитель может не помнить наизусть, как пишется этот логин, а потому мы сделаем так, чтобы он мог выбрать его из списка, причем список этот должен открыться в отдельном окне и там помимо списка логинов пользователей должны отображаться еще и их фотографии, ФИО, возраст и т.д. Предположим, что мы даже создали такую страницу со списком пользователей. Возникает вопрос – как передать из одного окна браузера в другое окно некоторые данные (в данном случае это – логин пользователя)?
Справочник по JavaScript и объектной документной модели DOM говорит нам, что для открытия нового окна нужно использовать метод window.open(), а для доступа из “дочернего” окна в “родительское” (то есть то, которое и породило новое окно) нужно использовать указатель opener. Рассмотрим этот факт на примере:
index.htm
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Главное окно</title> <script> function openWindow() { window.open("http://easy-4-web.ru/samples/transfer/popup.htm", "contents", "toolbar=no", "status=no"); } </script> </head> <body> <input type="button" onclick="openWindow()" value="Показать диалог"/><br /> <input type="text" id="data" /> </body> </html>
popup.htm
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Диалоговое</title> <script> function transferData() { opener.document.getElementById("data").value = document.getElementById("inp").value; window.close(); } </script> </head> <body> <input type="text" id="inp" name="inp"/> <input type="button" value="OK" onclick="transferData()"/> </body> </html>
В главной странице мы видим кнопку, по нажатии на которую открывается новое окно, и TEXTBOX с айдишником data, в него-то и будет попадать текст, введенный в диалоговом окне.
А вот и диалоговое окно, в нем мы видим TEXTBOX и кнопку по нажатию на которую текст введенный в текстовое поле присваивается текстовому полю data из главного окна. А доступ к нему мы и получаем при помощи указателя opener.
Вот здесь (Передача данных между окнами в рамках одного домена) вы можете протестировать работу этого алгоритма.
Здесь все просто, и я не стал бы писать эту статью, если бы хотел рассказать только про это.
А хочу я теперь рассказать о том, как быть если окна эти расположены в разных доменах. Когда такое может произойти? Предположим, есть Ваш форум, а есть специализированный сервис для загрузки и хранения фотографий и вот теперь владелец форума хочет договориться с владельцем фото-сервиса, что на форму он разместит кнопку “Добавить изображение”, которая будет открывать окно созданное в рамках фото-сервиса, в этом окне пользователь загрузит фотографии, а затем по нажатию кнопки “ОК” ссылки на фотографии скопируются в окно редактирования сообщения на форуме. Как видим, здесь есть два окна в разных доменах и нам нужно передать текст из одного окна в другое.
“Что тут сложного?” – спросите вы. А давайте попробуем.
Невозможность передачи данных между окнами в разных доменах
При попытке передачи данных между окнами получим ошибку Error: Access is denied.. Происходит это потому что прежде чем получить доступ к любому методу или свойству объекта opener браузер сравнит домен, в котором существует этот объект и домен, из которого происходит вызов собственно метода или свойства объекта opener. И если доменные имена не совпадают, будет возбуждено исключение “Доступ запрещен”.
Решить эту проблему можно. И мы решим ее без использования каких-либо серверных технологий, только силами JavaScript. Это становится возможным, если мы узнаем еще вот какую тонкость. При изменении свойства location.href в порожденном окне в него загрузится страница, заданная ссылкой, но значение указателя opener не изменится, он так и будет продолжать указывать на породившее его главное окно. А теперь представим себе, что мы в диалоговое окно загрузили все ту же главную страницу, или любую другую но с того же домена, где лежит главная страница, а после этого обратились к объекту opener, теперь домены диалогового окна и объекта opener снова совпадают, а значит исключение возбуждено не будет.
А теперь – время для исходников, иллюстрирующих пример:
index.htm
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Главное окно</title> <script> function openWindow() { var par = "?loc=" + location.href + "&id=data"; window.open("http://easyapi.ru/easy4web/transfer/popup2.htm" + par, "contents", "toolbar=no", "status=no"); } function getDataFromUrl() { var txt_id, data; var url = location.href; var query = url.split("?")[1]; if(query) { var params = query.split("&"); for(var i = 0; i < params.length; i++) { var keyval = params[i].split("="); if(keyval[0] == "data") { data = keyval[1]; } if(keyval[0] == "id") { txt_id = keyval[1]; } } } if(txt_id && data) { opener.document.getElementById(txt_id).value = data; close(); } } getDataFromUrl(); </script> </head> <body> <input type="button" onclick="openWindow()" value="Показать диалог"/><br/> <input type="text" id="data" /> <script> getDataFromUrl(); </script> </body> </html>
Итак, здесь мы видим, что процедура openWindow() все также открывает диалоговое окно, однако теперь она передает ему параметры: loc – указывающий на URL самой порождающей страницы; id – айдишник текстбокса, в который будет вставлен текст из дочернего окна.
А еще мы видим, что после загрузки контента главной страницы вызывается функция getDataFromUrl(), которая проверяет, есть ли GET-параметры id и data (айдишник текстбокса и текст, который мы в него будем вставлять). Параметры эти при изначальной загрузке страницы не заданы, а сначит при первой загрузке страницы код обновляющий содержимое текстбокса не выполнится. А когда он выполнится мы узнаем после того, как рассмотрим исходники диалогового окна.
popup.htm
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Диалог</title> <script> function transferData() { var url = location.href; var query = url.split("?")[1]; if(query) { var params = query.split("&"); for(var i = 0; i < params.length; i++) { var keyval = params[i].split("="); if(keyval[0] == "loc") { var loc = keyval[1]; } if(keyval[0] == "id") { var txt_id = keyval[1]; } } } if(loc && txt_id) { location.href = loc + "?id=" + txt_id + "&data=" + document.getElementById("inp").value; } } </script> </head> <body> <input type="text" id="inp" name="inp"/> <input type="button" value="OK" onclick="transferData()"/> </body> </html>
Здесь при клике по кнопке выполнится функция transferData(), которая сначала извлечет из адресной строки параметры loc и id, те самые, которые мы передали окну при его порождении. И если эти параметры есть – присвоим location.href адрес страницы loc(главной страницы), а в GET-параметры ей передадим id и data(айдишник текстбокса и данные, которые мы в него запишем). При этом в текущее окно (диалоговое) загрузится содержимое главнйо страницы и выполнится та самая функция getDataFromUrl() которая на этот раз извлечет все необходимые параметры из GET-строки и выполнит метод getElementById() объекта opener.document.
Вот и весь секрет кросдоменной передачи данных между окнами.
Вот здесь (Передача данных между окнами в разных доменах) можно протестировать работу вышеприведенного алгоритма.
Замечу, что у всех приведенных здесь решений есть существенный недостаток – корректно передаются только символы английского алфавита, цифры и знаки препинания. Решение этой проблемы оставлю на одну из следующих статей.
DOM: вытаскиваем текст вне тегов
Анализируя поисковый трафик, я обнаружил вопрос “вытащить текст вне тегов”, делюсь рецептом. Собственно, каждая ситуация уникальна, но в общем случае, нужно отыскать в DOM-структуре некий строго определенный элемент и уже относительно него отыскать нужный нам текст.
В нашем случае документ представляет собой два дива с заданными строго идентификаторами, между которыми расположен искомый текстовый элемент. При помощи getElementById мы на ходим элемент div1, а затем при помощи nextSibling добираемся до текстового узла, ведь он стоит следующим в DOM-структуре. Получить его значение можно при помощи свойства nodeValue.
Вот и весь рецепт.
<html> <head> <title>Hello!</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> function getText() { var div1 = document.getElementById("div1"); div1.nextSibling.nodeValue = "Поменял текст"; } </script> </head> <body> <div id="div1">Предшествующий блок</div> Это текст я хочу получить <div id="div2">Замыкающий блок</div> <input type="button" value="Start!" onclick="getText()"> </body> </html>