目前H5與原生交互的主要方式：
攔截Webview請求的URL Schema
URL Schema是類URL的一種請求格式怒炸，可以自定義JSBridge通信的URL Schema阿迈，比如：jsbridge://showToast?text=hello ，Native對符合約定的URL進(jìn)行解析断盛，拿到相關(guān)操作、操作愉舔，進(jìn)而調(diào)用原生Native的方法钢猛，主要有：
a標(biāo)簽
location.href
使用iframe.src
-
發(fā)送ajax請求
但是，a標(biāo)簽需要用戶操作轩缤；location.href可能會引起頁面的跳轉(zhuǎn)丟失調(diào)用命迈；發(fā)送ajax請求Android沒有相應(yīng)的攔截方法；所以使用iframe.src是比較好的方案火的。總結(jié)：針對這種攔截Webview請求的URL Schema的交互方式壶愤，雖然兼容性還行，但是基于URL的方式馏鹤，長度受到限制而且不太直觀征椒，數(shù)據(jù)格式有限制，而且建立請求有時間耗時湃累。
JavascriptInterface
//對應(yīng)安卓端 android為原生自定義
javascript:android.getSomething()
//對應(yīng)ios端 h5向原生發(fā)送消息msg
window.webkit.messageHandlers.getSomething.postMessage(msg)
//注冊供原生調(diào)用返回參數(shù)的方法
window.getSomething =（result）=>{
console.log('原生給H5的數(shù)據(jù)內(nèi)容',result)
}
jsbridge
//定義與初始化 jsbridge.js
//注冊事件監(jiān)聽勃救，初始化
function setupWebViewJavascriptBridge(callback) {
if(isAndroid){
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
if(isIos){
if (window.WebViewJavascriptBridge) {
return callback(window.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);
}
}
//回調(diào)函數(shù)，接收數(shù)據(jù)
if(isAndroid) setupWebViewJavascriptBridge(function(bridge) {
//默認(rèn)接收 安卓原生初始化
bridge.init(function(message, responseCallback) {
var responseData = 'js默認(rèn)接收完畢治力，并回傳數(shù)據(jù)給java';
responseCallback(responseData); //回傳數(shù)據(jù)給java
});
//注冊接收參數(shù)functionInJs名稱 與原生保持一致
// bridge.registerHandler("functionInJs", function(data, responseCallback) {
// console.log('接收到的數(shù)據(jù)',data);
// var responseData = 'js指定接收完畢蒙秒，并回傳數(shù)據(jù)';
// responseCallback(responseData); //回傳數(shù)據(jù)
// });
})
調(diào)用jsbridge
window.setupWebViewJavascriptBridge(bridge => {
// '原生函數(shù)名', "傳給原生端的數(shù)據(jù)", callback 回調(diào)函數(shù)
bridge.callHandler('getSomething', data, (result) => {
console.log(result);
});
})
坑點：Android頁面首次調(diào)用jsbridge時，返回較慢宵统，后續(xù)返回正常晕讲，暫未找出原因
