JavaScript, IFrame, ВКонтакте API, HTML
Приложение выводит значение переменной при его открытии и записывает значение в переменную, при нажатии на кнопку.
Урок для новичков в создании Iframe-приложений ВКонтакте. На примере этого приложения можно узнать как вызывать методы api, как обрабатывать полученный результат, как выполнять действие при нажатие на кнопку и как решить проблему с кодировкой.
Для работы приложения нужен хостинг.
putVariable
Помещает в переменную, номер которой задан в параметре key (0-4095), значение, переданное в параметре value (строка в utf-8, не более 255 байтов).
Обязательные параметры:
key - Ключ от 0 до 4095, идентификатор переменной.
value - Значение, которое нужно записать в переменную. Строка в utf-8, не более 255 байтов
getVariable
Возвращает значение переменной, номер которой задан в параметре key (0-4095).
Обязательные параметры:
key - Ключ от 0 до 4095, идентификатор переменной.
1. Создаём html файл.
Можно использовать специальную программу или любой текстовый редактор, например, блокнот.
Расширение файла должно быть html.
2. Пишем в созданый html файл код:
Код: Выделить всё
<html><head><!-- подключаем xd_connection.js --><script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script><script type="text/javascript">window.onload = (function() { // когда загрузится вся страница VK.init(function() { // инициализируем Vk API // получаем значение из переменной 1040 VK.api("getVariable", {key:1040}, function(data) { // обрабатываем полученный ответ // выводим в textarea с id="my_text" document.getElementById('my_text').innerHTML = data.response; }); });}); // функция записи в переменнуюfunction put(){ // получаем текст из textarea с id="my_text" var my_text = document.getElementById('my_text').value; my_text = my_text; // записываем значение my_text в ячейку 1040 VK.api("putVariable", {key:1040,value:my_text}, function(data) { // обрабатываем полученный ответ // если нет ошибки, то данные записаны if (!data.error) { document.getElementById('status_info').innerHTML = 'Данные записаны'; } else { // иначе ошибка. Выводим её. document.getElementById('status_info').innerHTML = data.error.error_msg; } });} </script></head><body><!-- поле для текста --><textarea id="my_text" rows="10" cols="45" >http://flapps.ru</textarea><br /><!-- кнопка для записи --><input type="button" value="Записать" onClick="put()"><!-- блок для вывода статуса записи: сохранено/не сохранено --><div id="status_info"></div></body></html>
Код: Выделить всё
{"error":{ "error_code":110, "error_msg":"Invalid key", "request_params":[...]}}
При успешном присваивании переменной сервер вернет:
Код: Выделить всё
{"response":{}}
3. Загружаем файл на свой сервер.
4. Настраиваем приложение на сайте вконтакте.
Выбираем:
Состояние: Приложение включено и видно всем
Тип приложения: IFrame
Адрес IFrame: Ссылка на созданный html файл на вашем сервере. Например http://flapps.ru/vk.html
5. Всё готово. Проверяем.
Помните, что переданное значение - строка в utf-8, не более 255 байтов. Большой текст будет обрезан.
Попробуйте сохранить текст с русскими буквами и обновите страницу. Если вместо нормального текста появляются крякозябли, то можно использовать функции escape() и unescape(). Мне они помогли.
Код такой:
Код: Выделить всё
<html><head><!-- подключаем xd_connection.js --><script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script><script type="text/javascript">window.onload = (function() { // когда загрузится вся страница VK.init(function() { // инициализируем Vk API // получаем значение из переменной 1040 VK.api("getVariable", {key:1040}, function(data) { // обрабатываем полученный ответ // выводим в textarea с id="my_text" document.getElementById('my_text').innerHTML = unescape(data.response); }); });}); // функция записи в переменнуюfunction put(){ // получаем текст из textarea с id="my_text" var my_text = document.getElementById('my_text').value; my_text = escape(my_text); // записываем значение my_text в ячейку 1040 VK.api("putVariable", {key:1040,value:my_text}, function(data) { // обрабатываем полученный ответ // если нет ошибки, то данные записаны if (!data.error) { document.getElementById('status_info').innerHTML = 'Данные записаны'; } else { // иначе ошибка. Выводим её. document.getElementById('status_info').innerHTML = data.error.error_msg; } });} </script></head><body><!-- поле для текста --><textarea id="my_text" rows="10" cols="45" >http://flapps.ru</textarea><br /><!-- кнопка для записи --><input type="button" value="Записать" onClick="put()"><!-- блок для вывода статуса записи: сохранено/не сохранено --><div id="status_info"></div></body></html>
Исходник http://flapps.ru/example/iframe_variables.rar