JS 调用 Native 功能（JSCallNative）

AndroidiOSWindows
如果您使用的是 Unreal Engine，请参见 Unreal Engine SDK 的 JSCallNative。

JS 代码通过 Player Network SDK WebView 模块调用 Native (Android/iOS) 功能实现网页全屏开启/关闭，打开应用，执行其他功能，并将结果返回给INTLWebViewObserver。

相关的代码，请参见 INTLWebViewSample.html。

调用协议

JS 代码与 Native 代码之间通过 JSON 字符串进行通信。

JSAPI	类型	说明
prompt	string	JSON 格式字符串

JSON 参数	类型	说明
INTLMethod	string	调用函数

INTLMethod 参数	说明	附加参数
closeWebView	关闭浏览器	--
setFullScreen	设置全屏	"isFullScreen": true/false
setScreenOrientation	设置横竖屏	"screenOrientation":"1" 1：自动 2：竖屏 3：横屏
OpenUrlInINTLBrowser	用系统浏览器打开	"url":"https://www.qq.com/"
jsCallNative	调用游戏 native 代码	--
goBack	后退，只支持 Windows 平台	--
ReportEvent	数据上报	参考 输入参数的 上报事件 和代码示例 [1]
shareWebView	分享（Share）	参考 数据结构的 分享 和代码示例 [2]
clearWebViewFocus	清除 WebView 焦点	--

iOS 和 Android 格式示例：

{"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 格式示例

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"}');

其中，关键字必须包含 INTLMethod，用于指定调用的方法，其它字段作为入参。

INTLMethod，渠道，媒体详情，分别用于指定调用方法，渠道和多媒体细节。

代码示例

为网页客户端，Player Network SDK 提供网页客户端初始化，浏览器操作，和多媒体消息分享/发送功能的关键代码示例。

初始化代码示例

<script>
// 获取 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)
}
// 初始化 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>

浏览器操作代码示例
示例包括关闭浏览器，设置浏览器全屏，和还原浏览器全屏。

//初始化协议参数
<script>
    var CloseWebView        = '{"INTLMethod":"closeWebView"}';
    var SetFullScreen       = '{"INTLMethod":"setFullScreen","isFullScreen":true}';
    var ResetFullScreen     = '{"INTLMethod":"setFullScreen","isFullScreen":false}';
</script>

//调用 INTLCallNative 从 js 触发 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)">