webView 에서 JS 를 사용 하여 Android / IOS 함수 Function 을 호출 합 니 다.

최근 에 프로젝트 를 만 들 었 는데 NativeCode 와 HTML 을 섞 었 습 니 다. JS 가 App 을 호출 하 는 방법 을 편리 하 게 하기 위해 JS 방법 을 통일 적 으로 포장 하고 다음 과 같이 기록 합 니 다.
Android 쪽 에 서 는 먼저 WebView 에서 JS 호출 을 허용 해 야 합 니 다.

WebView myWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = myWebView.getSettings();

webSettings.setJavaScriptEnabled(true);

myWebView.addJavascriptInterface(new WebAppInterface(this), "JsAndroid");

 
IOS 엔 드 는 오픈 소스 라 이브 러 리 EasyJsWebView 를 사용 하여 IOS 엔 드 에서 참조 하면 됩 니 다.
 
JS 코드:

function callApp(method) {

        var args = [].slice.call(arguments).splice(1);

        var s = "";

        if (/android/i.test(navigator.userAgent)) {//  

            s = window["JsAndroid"][method].apply(window.JsAndroid, args);

        }

        if (/ipad|iphone|mac/i.test(navigator.userAgent)) {//ios

            s = window["JsIOS"][method].apply(this, args);

        }

        return s;

    }



// IOS     

window.EasyJS = {

    __callbacks: {},

    

    invokeCallback: function (cbId, removeAfterExecute) {

        var args = Array.prototype.slice.call(arguments).splice(2);



        for (var i = 0, l = args.length; i < l; i++) {

            args[i] = decodeURIComponent(args[i]);

        }



        var cb = EasyJS.__callbacks[cbId];

        if (removeAfterExecute) {

            EasyJS.__callbacks[cbId] = undefined;

        }

        return cb.apply(null, args);

    },



    call: function (obj, functionName, args) {

        var formattedArgs = [];

        for (var i = 0, l = args.length; i < l; i++) {

            if (typeof args[i] == "function") {

                formattedArgs.push("f");

                var cbId = "__cb" + (+new Date);

                EasyJS.__callbacks[cbId] = args[i];

                formattedArgs.push(cbId);

            } else {

                formattedArgs.push("s");

                formattedArgs.push(encodeURIComponent(args[i]));

            }

        }



        var argStr = (formattedArgs.length > 0 ? ":" + encodeURIComponent(formattedArgs.join(":")) : "");



        var iframe = document.createElement("IFRAME");

        iframe.setAttribute("src", "easy-js:" + obj + ":" + encodeURIComponent(functionName) + argStr);

        document.documentElement.appendChild(iframe);

        iframe.parentNode.removeChild(iframe);

        iframe = null;



        var ret = EasyJS.retValue;

        EasyJS.retValue = undefined;



        if (ret) {

            return decodeURIComponent(ret);

        }

    },



    inject: function (obj, methods) {

        alert(obj);

        window[obj] = {};

        var jsObj = window[obj];

        for (var i = 0, l = methods.length; i < l; i++) {

            (function () {

                var method = methods[i];

                var jsMethod = method.replace(new RegExp(":", "g"), "");

                jsObj[jsMethod] = function () {

                    alert("qq");

                    return EasyJS.call(obj, method, Array.prototype.slice.call(arguments));

                };

            })();

        }

    }

};

　　
설명 하 자 면, 처음에 안 드 로 이 드 를 호출 하 는 것 도 window ["JsAndroid"] [method]. apply (this, args) 를 사용 하면 완전히 일치 합 니 다.그러나 디 버 깅 을 할 때 이런 방식 이 정상적으로 호출 되 지 않 는 것 을 발 견 했 습 니 다. google 은 this 의 영향 도 메 인 으로 인해 검색 도 메 인 을 밝 혀 야 합 니 다.레 퍼 런 스
 
기록 해 봐!