jsInterfaceSetting

Communication between iOS/Android native app and webpage Javascript

此文件說明如何在網頁傳遞訊息到 APP 以及在網頁如何接收來自 APP 的訊息

From Javascript to iOS/Android

在網頁加入下方 Javascript 來傳遞訊息給 iOS/Android native app

以 Dashboard 頁面中提供的 changeDashboard API 為範例
傳遞內容為 JSON 格式的字串

(function (global) {
    if (global.callNativeInterface) {
        return;
    }
    function callIosNativeApp (funcName, msg) {
        var iosMsg = JSON.stringify({"funcName":funcName, "msg":msg});
        try {
        console.log('call ios native');
            if(webkit && webkit.messageHandlers && webkit.messageHandlers.callIosNativeApp){
				webkit.messageHandlers.callIosNativeApp.postMessage(iosMsg);  
            }
        } catch(err){
            console.log('The ios native context does not exist yet');
        }
    }
    
    var callNativeInterface = new Object();

    callNativeInterface.changeDashboard = function(type, dashboardUrl){
        var cbObj = {};
        cbObj.type = type;
        cbObj.dashboard = dashboardUrl;
        var cbJsonStr = JSON.stringify(cbObj);
        
        if(typeof(appJsInterface) != 'undefined'){
            //android
            appJsInterface.changeDashboard(cbJsonStr);
        }else{
            //ios
            callIosNativeApp('changeDashboard', cbJsonStr);
        }
    };
 
    global.callNativeInterface = callNativeInterface;
})(this);

From iOS/Android to Javascript

在網頁加入下方 Javascript 來接收 iOS/Android native app 傳送的訊息

以 Dashboard 頁面中提供的 openDialog API 為範例
傳遞內容為 JSON 格式的字串

(function (global) {
    if (global.jsAppInterface) {
        return;
    }

    var jsAppInterface = new Object();

    jsAppInterface.messageHandler = function(result){

        try{
            var resultObj = JSON.parse(result);
            var funcName = resultObj.funcName;
            var msgObj = resultObj.msg;
            
            if(funcName == 'openDialog'){
            		if(msgObj.name == 'LSVA'){
            			// open LSVA dialog
            		}
            }

        }catch(error){
            console.log(error.message); 
        }
    };

    global.jsAppInterface = jsAppInterface;
})(this);