vk 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:

2. After page is loaded you can use the following code for application initialization:

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

init Function success Initializes connection to a parent window to start external calls. If initialization is successful, success function is called.

callMethod String name, Object param1, Object param2, ... Calls Client API method externally.

addCallback String name, Function callback Adds callback function as name event handler.

removeCallback String name, Function callback Removes name event handler.

api String method, Object params, Function callback Makes 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

onApplicationAdded — This event occurs when user adds the application to his/her page.

onSettingsChanged int settings This 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.

onBalanceChanged int balance This 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.

onOrderCancel — This event occurs when user cancels the purchase.

onOrderSuccess int orderId This event occurs when purchase is completed successfully.

onOrderFail int errorCode This event occurs when purchase fails.

onProfilePhotoSave — This event occurs when user confirms saving of the photo in the window, called by showProfilePhotoBox function.

onWallPostSave — This event occurs when user confirms posting on the wall in the window, called by showWallPostBox function.

onWallPostCancel — This event occurs when user cancels posting on the wall.

onWindowResized int width, int height This event occurs when window size was changed. width and height parameters contain new values of the application size in pixels.

onLocationChanged String location This 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.

onWindowBlur — This event occurs when application window is blurred. For example, when user opens the window with application settings.

onWindowFocus — This event occurs when application window is in focus. For example, when user closes the window with application settings.

onScrollTop int scrollTop, int windowHeight This event occurs when scrollTop method is called. windowHeight parameter defines window height in the browser.

onScroll int scrollTop, int windowHeight This 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.

onToggleFlash bool show This 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 

});