A. H5 與Native的交互方案
App里基本都少不了H5頁面，因此js與Native之間的通信不可避免，最近留意了一些方案，做下總結。
iOS有兩種webview，ios8以上推出了WKWebView，低於ios8用的是UIWebView，WKWebView性能上優於UIWebView
Native調用Javascript語言，是通過UIWebView組件的方法來實現的，該方法返回js腳本的執行結果。
雙方只需要約定好JS端函數名稱及參數
JS調用Native，並沒有現成的API可以使用，需要藉助iframe來實現。原理是在UIWebView內發起的所有網路請求，都可以通過delegate函數在Native層得到通知。所以只需要劫持該UIWebView內的所有請求（通常是這樣的格式： jsbridge://methodName?param1=value1¶m2=value2 ），然後在UIWebView的delegate函數中，只要發現是jsbridge://開頭的地址，就不進行內容的載入，轉而執行相應的調用邏輯：
在android里是使用webview的loadUrl進行調用的
有兩種比較好的方式：
JS端可以直接調用：alert(AndroidJS.getUserData()) //UserDate
基於 callHandler 和 registerHandler的方式，比較干凈
1、 Web 與 App 數據交互原理和實現
2、 WK 與 JS 的那些事
3、 H5 與 Native 交互之 JSBridge 技術
4、 WebView 開車指南之最全實用案例
B. js怎麼跟Android和ios進行交互呢
Android和ios都是用語言編寫的app，那麼調用js的方法如下：
Native 調用 JS:
本質就一個方法,通過 ,都是同步。
1.通常方法：js修通過改doucument的loaction或者新建一個看不見的iFrame,修改它的 src,就會觸發回調 webView 的 shouldStartLoadWithRequest,參數 request 的 url 就是新賦值的 location 或者 url,上層截獲這個 url 的參數,對此分發即可。 這個都是非同步調用的。
如 JS function：
var messagingIframe;
messagingIframe = document.createElement('iframe');
messagingIframe.style.display = 'none';
document.documentElement.appendChild(messagingIframe);
function TestIOSJS(){
messagingIframe.src = "ios/test/click";
};
當觸發上面的JS時，webview會收到下面的回調：
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSString *url = request.URL.absoluteString;
if([url hasSuffix:@"ios/test/click"]){
//do something you want
return NO;
}
return YES;
}
通過截獲這個request的參數就可以做native需要做的事情。
C. Cordova 中 如何在 native 接收到廣播之後調用js中的方法
function getFrame(frameId)
{
if (typeof window.my_iframe == "undefined") {
window.my_iframe = document.getElementById(frameId);
if (typeof window.my_iframe == "undefined")
throw "fatal: iframe object not found";
}
return window.my_iframe;
}
function getFrameWin()
{
var f = getFrame();
var win = f.contentWindow || f.contentDocument;
return win;
}
function getFrameDoc()
{
var win = getFrameWin();
return win.contentDocument || win.document;
}
var doc = getFrameDoc();
doc.body.getElementById('div1').style.display = 'block';