WebViewJavascriptBridge implements native interaction between js and android and ios

1. Realize the interaction between native and js

    <!-- Declare interaction This code must have -->
function setupWebViewJavascriptBridge(callback) {
    //android use
    if (window.WebViewJavascriptBridge) {
        callback(window.WebViewJavascriptBridge)
    } else {
        document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , function() {
                callback(window.WebViewJavascriptBridge)
            },
            false
        );
    }
    //ios use
    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)
}
setupWebViewJavascriptBridge(function(bridge) {

//oc or android drop js
    bridge.registerHandler('result', function(data, responseCallback) {
        if(data.errorCode == null  || data.errorCode == "")
            window.location.href = "refresh.html?result=success";
        else
            window.location.href = "refresh.html?result=fail";
    });

    //js drop native
    $(document).on('click', '#call', function() {
        bridge.callHandler('call', {'sessionId':$.cookie("sessionId")}, function(response) {
            //Process the callback from oc
            var responseData = { 'Javascript Says':'Right back atcha!' };
            responseCallback(responseData);
        });
    });

});
<div>
   <a id = "call">Jump to mobile terminal> </a>
</div>

Reference: https://www.jianshu.com/p/e37ccf32cb5b

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324524867&siteId=291194637