ios 与 html 5 交互 的实现

ios 与 html 5 交互 的实现

一：最近 html 5  越来越火，不仅是因为html 5 效果极佳，更重要的是现在大多数移动端都支持html 5，那么有些公司为了节约成本，就用html5，而它们的交互，则就要做了

二：这里我用WebViewJavascriptBridge 来作为中间层，实现起来也很简单，上图

1. IOS端的实现：

2. js实现

代码：js

function connectWebViewJavascriptBridge(callback) {

    if (window.WebViewJavascriptBridge) {

        callback(WebViewJavascriptBridge)

    } else {

        document.addEventListener('WebViewJavascriptBridgeReady', function() {

        callback(WebViewJavascriptBridge)}, false)

    }

}

var app = {

    setImageList:function(wgImageList) {

        connectWebViewJavascriptBridge(function(bridge) {

            bridge.callHandler('setImageList', wgImageList, function(response) {})

        });},

    showImage:function(url) {

        connectWebViewJavascriptBridge(function(bridge) {

            bridge.callHandler('showImage', url, function(response) {})

        });},

    version:function(){

        return 2;

    }

}

function getContentHeight()

{

    return document.getElementById("content").offsetHeight;

}

function setHtmlFontSize(size) {

    document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust = size + "%";

    $(window).resize();

    return getContentHeight();

}

initApp();

oc ：

#define INVOKEJSOCBRIDGE_FILE_NAME @"JsInvokeOCBridge.js.txt"

#import "InvokeJsOCBridge.h"

#import "WebViewJavascriptBridge.h"

@interface InvokeJsOCBridge ()

/*** oc 与 js 交互桥梁（通道） ***/

@property (strong, nonatomic) WebViewJavascriptBridge *wbJSBridge;

@end

@implementation InvokeJsOCBridge

#pragma mark - 注入js

+ (void)registerJS:(UIWebView *)webview {

    NSString *filePath = [[NSBundle mainBundle] pathForResource:INVOKEJSOCBRIDGE_FILE_NAME ofType:nil];

    NSString *js = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];

    [webview stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"%@",js]];

}

#pragma mark - 初始化

- (instancetype)initWithParentVC:(DetailViewController *)parentVC{

    if(self = [super init])

    {

        // *** 初始化交互桥梁（通道）

        self.wbJSBridge = [WebViewJavascriptBridge bridgeForWebView:parentVC.webView webViewDelegate:parentVC.webView handler:^(id data, WVJBResponseCallback responseCallback) {} resourceBundle:nil];

        // *** 注入js

        [InvokeJsOCBridge registerJS:parentVC.webView];

        // * js 回调 oc 操作

        [self registerInvoker:parentVC];

    }

    return self;

}

#pragma mark - 链接js与oc交互方法

- (void)registerInvoker:(id<InvokeJsOcBridgeDelegate>) invoker{

    // *** 注册 setImageList(wgImageList) -> 获取图片列表信息

    [self.wbJSBridge registerHandler:@"setImageList" handler:^(id data, WVJBResponseCallback responseCallback) {

//        NSLog(@"data = %@", data);

        [invoker setImageList:data];

    }];

    

    // *** 注册 showImage -> 获取图册信息

    [self.wbJSBridge registerHandler:@"showImage" handler:^(id data, WVJBResponseCallback responseCallback) {

        [invoker showImage:data];

    }];

    

//    // *** 注册 setTocList -> 获取目录列表信息

//    [self.wbJSBridge registerHandler:@"setTocList" handler:^(id data, WVJBResponseCallback responseCallback) {

//        NSLog(@"data = %@", data);

        [invoker setTocList:data];

//    }];

//    

//    // *** 注册 showToc -》 获取单个目录信息

//    [self.wbJSBridge registerHandler:@"showToc" handler:^(id data, WVJBResponseCallback responseCallback) {

//        NSLog(@"data = %@", data);

        [invoker showToc:data];

//    }];

//    

//    // *** 注册 setCurrentHeadLine

//    [self.wbJSBridge registerHandler:@"setCurrentHeadLine" handler:^(id data, WVJBResponseCallback responseCallback) {

//        NSLog(@"data = %@", data);

        [invoker setCurrentHeadLine:data];

//    }];

//    

//    // *** 注册 setPageInfo

//    [self.wbJSBridge registerHandler:@"setPageInfo" handler:^(id data, WVJBResponseCallback responseCallback) {

//        NSLog(@"data = %@", data);

        [invoker setPageInfo:data];

//    }];

}

#pragma mark - 设置网页字体大小

+ (float)setHtmlFontSize:(UIWebView *)webview textSize:(NSInteger)textSize;

{

    if(WF_DEVICE_IPad)

    {

        textSize += 20;

    }

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

        

    });

    return [[webview stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"setHtmlFontSize('%d')", (int)textSize]] floatValue];

}