和安卓和ios的webview的数据交互

第一步是必写的

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 = 'wvjbscheme://__BRIDGE_LOADED__';
                document.documentElement.appendChild(WVJBIframe);
                setTimeout(function() {
                    document.documentElement.removeChild(WVJBIframe)
                }, 0)
            }

第二步

setupWebViewJavascriptBridge(function(bridge) {
    //和ios和安卓的交互放在这里
}

第三步 写交互

setupWebViewJavascriptBridge(function(bridge) {
                var uniqueId = 1

                function log(message, data) {
                    var log = document.getElementById('log')
                    var el = document.createElement('div')
                    el.className = 'logLine'
                    el.innerHTML = uniqueId++ + '. ' + message + ':
' + JSON.stringify(data) if (log.children.length) { log.insertBefore(el, log.children[0]) } else { log.appendChild(el) } } // registerHandler是注册,ios和安卓那边可以调取你这边的数据 bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) { log('Java called testJavascriptHandler with', data) var responseData = { 'Javascript Says': 'Right back atcha!' } log('JS responding with', responseData) responseCallback(responseData) }) bridge.callHandler('getAuthToken', {//getAuthToken 是调取安卓那边注册事件 需要统一 'foo': 'bar' }, function(response){ $.ajax({ type: "GET", headers: { 'Authorization': 'Bearer ' +response,//response 是安卓和ios那边返回的token }, url: "url", async: true, success: function(res) { console.log(res) }, error(err) { console.log(err) } }) }) })

附加一个简单的报错插件



你可能感兴趣的:(和安卓和ios的webview的数据交互)