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';