Dokumentation » 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://vk.com/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
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
});