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
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.
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. |
To make external calls you need to use VK.callMethod(String methodName, Object param1, Object param2, ...) function.
List of Methods
VK.callMethod("resizeWindow", 510, 600);
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.
VK.api('video.get',{videos: '-4363_136089719,13245770_137352259'},function(data) {
if (data.response) {
// data.response is object
}
});
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. |
VK.addCallback("onSettingsChanged", onSettingsChanged);
...
function onSettingsChanged(settings) {
// do something
}
VK.api("users.get", {uids:"1,2,3,4"}, function(data) {
// actions with received data
});