JavaScript, Iframe, ВКонтакте API, HTML
В уроке показано, как вызывать методы Javascript API в своём IFrame приложении и как отслеживать действий на странице с приложением.
Для работы приложения нужен хостинг.
Вызов методов Javascript API
Для осуществления внешних вызовов необходимо использовать функцию VK.callMethod(String methodName, Object param1, Object param2, ...).
Доступные методы Javascript API:
showInstallBox, showSettingsBox, showInviteBox, showPaymentBox, showMerchantPaymentBox, showProfilePhotoBox, saveWallPost, resizeWindow, scrollWindow, setTitle, setLocation.
Все они используются аналогично. Некоторые из них требуют указать дополнительные параметры, а некоторые нет.
Например, showInstallBox не требует дополнительных параметров и вызывается так:
- VK.callMethod("showInstallBox");
А setTitle требует дополнительного праметра String title и вызывается так:
- VK.callMethod("setTitle", 'API flapps.ru');
Если нужно указать 2 параметра, то они указываются через запятую, например, метод resizeWindow:
- VK.callMethod("resizeWindow", 807, 600);
Обработка событий
В результате совершения пользователем каких-либо действий на странице с приложением, родительское окно создает события, которые можно отслеживать с помощью функции VK.addCallback(String name, Function value).
Cписок событий:
onApplicationAdded, onSettingsChanged, onBalanceChanged, onMerchantPaymentCancel, onMerchantPaymentSuccess, onMerchantPaymentFail, onProfilePhotoSave, onWallPostSave, onWallPostCancel, onWindowResized, onLocationChanged, onWindowBlur, onWindowFocus.
Некоторые события содержат параметры, в которых храняться новые значения. Например, onSettingsChanged - содержит параметр settings в виде битовой маски выставленных значений настроек.
Пример использования:
- <html>
- <head>
- <!-- подключаем xd_connection.js -->
- <script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script>
- <script type="text/javascript" charset="cp1251" >
- window.onload = (function() { // когда загрузится вся страница
- VK.init(function() { // инициализируем Vk API
- // изменяем заголовок окна браузера
- VK.callMethod("setTitle", 'API flapps.ru');
- // изменяем ширину и высоту элемента IFrame
- VK.callMethod("resizeWindow", 807, 600);
- // открываем окно с пользовательскими настройками приложения
- VK.callMethod("showSettingsBox", 2048);
- // когда пользователь изменяет настройки приложений
- VK.addCallback("onSettingsChanged", onSettingsChanged);
- function onSettingsChanged(settings) {
- alert('Настройки изменены: ' + settings);
- }
- });
- });
- </script>
- </head>
- <body>
- <div id="info">http://flapps.ru</div>
- </body>
- </html>
Чтобы проверить работу, создайте html файл, загрузите его на сервер и настройте приложение вконтакте.
Если не знаете как это сделать, то посмотрите как это было сделано здесь topic721.html
Официальная документация по методам и событиям http://vkontakte.ru/page9279356
