webview给前端页面传递数据_使用WebViewJavascriptBridge实现与UIWebView的深度交互

最近在做的项目遇到这么一个需求：网络加载一段HTML格式的只有body部分的文本，自己本地拼写完整的HTML，图片需带点击放大浏览功能(移动端实现)。

分析需求之后发现难点在如何与UIWebview进行交互，在查阅资料后，找到http://kittenyang.com/webview-javascript-bridge

KittenYang大神完美解决了我的问题，但过程中还是出了不少问题，这里就写下按照大神的思路写的具体实现过程

这里主要用了WebViewJavascriptBridge,SDWebImage,YYPhotoGroup这三个第三方库。

WebViewJavascriptBridge使用简介

HTML文本的标签中间添加如下代码

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) {

//方法名，传递的参数，回调

bridge.callHandler('testObjcCallback', 'Hello world', function(response)){

};

//方法名，收到的参数，回调方法

bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {

var message = data['foo']

console.log(message)

})

在OC端需实现

@property(strong,nonatomic) WebViewJavascriptBridge* bridge;

_bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

//注册方法

[_bridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {

NSLog(@"testObjcCallback called: %@", data);

responseCallback(@"Response from testObjcCallback");

}];

//调用JS的方法并传参

[_bridge callHandler:@"testJavascriptHandler" dat