Developers » Javascript SDK
Javascript SDK
For closer integration of IFrame application with VK user interface you can use Javascript SDK which enables the following functions:
  • Open the following windows: application installation, settings, friend invitation and vote input to pay for services.
  • Receive events about successful installation of the application by the user, change of settings and balance of the user inside the application.
  • Dynamically change the application window size.
  • Access API server methods.
  • Connecting widgets for sites
Javascript SDK Initialization
1. Add the following link to your page code:
<script src="http://club-malinka.ru/js/api/xd_connection.js?2"; type="text/javascript">
</script>


2. After page is loaded you can use the following code for application initialization:
<script type="text/javascript">
  VK.init(function() {
     // API initialization succeeded
     // Your code here
  });
</script>


Note that application initialization can be finished before your application is completely loaded and window.onload event is executed.
Javascript SDK Methods
All methods below are available in the context of VK global object created as a result of xd_connection.js file connection to the application page.

Method name
Parameters
Description
initFunction successInitializes connection to a parent window to start external calls. If initialization is successful, success function is called.
callMethodString name, Object param1, Object param2, ...Calls Client API method externally.
addCallbackString name, Function callbackAdds callback function as name event handler.
removeCallbackString name, Function callbackRemoves name event handler.
apiString method, Object params, Function callbackMakes request to VK API and passes the received data to callback function.
Calling Client API Methods
To make external calls you need to use VK.callMethod(String methodName, Object param1, Object param2, ...) function.

List of Methods

Example of External Method Call:
VK.callMethod("resizeWindow", 510, 600);
Calling VK API
To call API you need to use VK.api(methodName, {params}, callback) function.
When request is completed, callback function will be called with an object containing either response or error field.

VK.api takes 3 parameters:
1) API method name.
2) Object with request parameters.
3) Function to process the results.

Example of Calling VK API:
VK.api('video.get',{videos: '-4363_136089719,13245770_137352259'},function(data) {
  if (data.response) {
  // data.response is object
  }
});


Handling Events
When user does any action on the application page, the parent window creates events that can be monitored using VK.addCallback(String name, Function value) function. The table below shows a list of such events.

Event name
Parameters
Description
onApplicationAddedThis event occurs when user adds the application to his/her page.
onSettingsChangedint settingsThis event occurs when user changes application settings. settings parameter of the object passed into callback function contains a bit mask of the set settings values. To learn more about settings parameter see account.getAppPermissions method description.
onBalanceChangedint balanceThis event occurs when user credits or debits application vote balance. balance parameter contains current balance of the user in hundredth of a vote. This parameter can be used only for output for the user. Balance reliability shall always be checked with secure.getAppBalance method.
onOrderCancelThis event occurs when user cancels the purchase.
onOrderSuccessint orderIdThis event occurs when purchase is completed successfully.
onOrderFailint errorCodeThis event occurs when purchase fails.
onProfilePhotoSaveThis event occurs when user confirms saving of the photo in the window, called by showProfilePhotoBox function.
onWallPostSaveThis event occurs when user confirms posting on the wall in the window, called by showWallPostBox function.
onWallPostCancelThis event occurs when user cancels posting on the wall.
onWindowResizedint width, int heightThis event occurs when window size was changed. width and height parameters contain new values of the application size in pixels.
onLocationChangedString locationThis event occurs when the hash value is changed after # symbol in the browser address bar. For example, it happens when Back and Forward buttons are used in the browser. This event always occurs when application is run.
onWindowBlurThis event occurs when application window is blurred. For example, when user opens the window with application settings.
onWindowFocusThis event occurs when application window is in focus. For example, when user closes the window with application settings.
onScrollTopint scrollTop, int windowHeightThis event occurs when scrollTop method is called. windowHeight parameter defines window height in the browser.
onScrollint scrollTop, int windowHeightThis event occurs when user scrolls the page. To subscribe to this event you need to call scrollSubscribe method. windowHeight parameter defines window height in the browser.
onToggleFlashbool showThis event occurs when a pop-up window is opened and you need to hide flash components in the application for which it is impossible to set wmode="opaque", for example show defines what action shall be done with components: hide or show.

Event Handling Code Example:
VK.addCallback("onSettingsChanged", onSettingsChanged);
...
function onSettingsChanged(settings) {
// do something
}


API Request Example:
VK.api("users.get", {uids:"1,2,3,4"}, function(data) {
    // actions with received data
});