JSCallNative

AndroidiOSWindows
If you were looking for the method for use with Unreal Engine, see JSCallNative for Unreal Engine SDK.

JS code calls Native (Android/iOS) functions through Player Network SDK WebView module to enable/disable fullscreen mode for webpages, open apps, perform other functions, and returns the result to INTLWebViewObserver.

For relevant codes, see INTLWebViewSample.html.

Call protocol

JS code and Native code communicate through JSON strings.

JSAPI	Type	Description
prompt	string	JSON string

JSON parameter	Type	Description
INTLMethod	string	Call function

INTLMethod parameter	Description	Additional parameter
closeWebView	Close the browser	--
setFullScreen	Set the browser to fullscreen mode	"isFullScreen": true/false
setScreenOrientation	Set the browser orientation	"screenOrientation":"1" 1: Auto 2: Portrait 3: Landscape
OpenUrlInINTLBrowser	Open the specified URL with default system browser	"url":"https://www.qq.com/"
jsCallNative	Call native code of the game	--
goBack	Back, only supports Windows platform	--
ReportEvent	Data reporting	See Input parameters of ReportEvent and the code sample [1]
shareWebView	Share	See Data structure of Share and the code sample [2]
clearWebViewFocus	Clear WebView focus	--

iOS and Android Format sample:

{"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 sample:

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 to specify the call method. Other fields are input parameters.

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

Code sample

For the web client, Player Network SDK provides code samples of web client initialization, browser operation, and key media sharing/sending function.

Initialization code sample

<script>
// Get WebViewJavascriptBridge，iOS
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
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 sample
Includes closing the browser, setting the browser to fullscreen mode, and restoring the browser from fullscreen mode.

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

//Call INTLCallNative to trigger native from js
<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)">