JS Call Native Function (JSCallNative)

AndroidiOSWindows
If you are using Unreal Engine, see Unreal Engine SDK's JSCallNative.

JS code calls native (Android/iOS) functionality via the Player Network SDK WebView module to implement webpage fullscreen toggle, open applications, execute other functions, and return results to INTLWebViewObserver.

For related code, see INTLWebViewSample.html.

Call Protocol

Communication between JS code and Native code is done through JSON strings.

JSAPI	Type	Explanation
prompt	string	JSON format string

JSON Parameters	Type	Explanation
INTLMethod	string	Call function

INTLMethod Parameters	Description	Additional Parameters
closeWebView	Close browser	--
setFullScreen	Set Fullscreen	"isFullScreen": true/false
setScreenOrientation	Set Screen Orientation	"screenOrientation":"1" 1: Auto 2: Portrait 3: Landscape
OpenUrlInINTLBrowser	Open with system browser	"url":"https://www.qq.com/"
jsCallNative	Call game native code	--
goBack	Back, only supported on Windows platform	--
ReportEvent	Data reporting	Refer to Input parameter's Report Event and code sample [1]
shareWebView	Share (Share)	Refer to Data structure's Share and code sample [2]
clearWebViewFocus	Clear WebView Focus	--

iOS and Android Format Examples:

{"INTLMethod":"OpenUrlInINTLBrowser","ParamKey":{"url":"https://www.qq.com"}}

{"INTLMethod":"setScreenOrientation","screenOrientation":"1"}

[1]

{"INTLMethod":"ReportEvent","eventName":"Login","key1":"","value1":"","key2":"","value2":"","spChannel":"","extraJson":""}

[2]

{"INTLMethod":"shareWebView","channel":"Facebook","type":10001,"user":"","title":"","desc":"","imagePath":"","thumbPath":"","mediaPath":"","link":"https://www.facebook.com","extraJson":""}

Windows Format Example

INTLWebView:

window.tbs_external.nativeCall("setFullScreen", ['{"INTLMethod":"setFullScreen","isFullScreen":true}']);
window.tbs_external.nativeCall("closeWebView", ['{"INTLMethod":"closeWebView"}']);

INTLWebView2:

window.chrome.webview.postMessage('{"INTLMethod":"setFullScreen","isFullScreen":true}');
window.chrome.webview.postMessage('{"INTLMethod":"closeWebView"}');

The keyword must include INTLMethod, used to specify methods to call, and other fields are used as input parameters.

INTLMethod, channel, media details, used to specify call method, channel, and multimedia details respectively.

Code Example

For the webpage client, Player Network SDK provides key code examples for client initialization, browser operations, and multimedia message sharing/sending.

Initialization Code Example

<script>
// Get WebViewJavascriptBridge, iOS method
function setupWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
// Initialize intliOSHandler, iOS method
setupWebViewJavascriptBridge(function(bridge) {
    intliOSHandler = bridge.callHandler
    bridge.registerHandler('INTLJSHandler', function(data, responseCallback) {
        log('ObjC called INTLJSHandler with', data)
        alert(data)
    })
    bridge.registerHandler('OnEnterForeground', function(data, responseCallback) {
        OnEnterForeground()
    })

    bridge.registerHandler('OnEnterBackground', function(data, responseCallback) {
        OnEnterBackground()
    })

    bridge.registerHandler('OnGetNetworkType', function(data, responseCallback) {
        OnGetNetworkType(data)
    })

    bridge.registerHandler('OnOpenPhoto', function(data, responseCallback) {
        OnOpenPhoto(data)
    })
})
// Player Network SDK JS Test API
function INTLCallNative(data) {
    console.log('INTLCallNative invoked start ->');
        if (isiOS()) {
        intliOSHandler('INTLCallNative', data, null)
    } else {
        if (data.indexOf("nativeCallJS") > -1) {
            console.log('INTLCallNative invoked nativeCallJS : ' + data);
            alert(data)
        } else {
            console.log('INTLCallNative invoked : ' + data);
            prompt(data);
        }
    }
}
</script>

Browser Operation Code Example
Examples include closing the browser, setting and resetting the browser full screen.

// Initialize protocol parameters
<script>
    var CloseWebView        = '{"INTLMethod":"closeWebView"}';
    var SetFullScreen       = '{"INTLMethod":"setFullScreen","isFullScreen":true}';
    var ResetFullScreen     = '{"INTLMethod":"setFullScreen","isFullScreen":false}';
</script>

// Call INTLCallNative from js to trigger native
<input type="button" value="Close WebView" onclick="INTLCallNative(CloseWebView)">
<input type="button" value="Set WebView full screen" onclick="INTLCallNative(SetFullScreen)">
<input type="button" value="Reset WebView full screen" onclick="INTLCallNative(ResetFullScreen)">