WebViewJavascriptBridge

An iOS/OSX bridge for sending messages between Obj-C and JavaScript in WKWebViews.

More simple more light. Refactor WebViewJavascriptBridge with AOP

How to use ?

Installation with CocoaPods

Add this to your podfile and run pod install to install:

pod 'SKJavaScriptBridge'

If native want to get console.log in WKWebView just [WKWebView enableLogging:LogginglevelAll]; is enough.

Manual installation

Drag the WebViewJavascriptBridge folder into your project.

In the dialog that appears, uncheck "Copy items into destination group's folder" and select "Create groups for any folders".

Usage

Import the header file and declare an ivar property:

#import "WKWebView+JavaScriptBridge.h"

@property (nonatomic, strong) WKWebView *webView;

- (WKWebView *) webView {
    if (!_webView) {
        WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
        _webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
        [self.view addSubview:_webView];
        //If you set LogginglevelAll ,Xcode command Line will show all JavaScript console.log.
        [WKWebView enableLogging:LogginglevelAll];
    }
    return _webView;
}

[self.webView registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
	NSLog(@"ObjC Echo called with: %@", data);
	responseCallback(data);
}];
[self.webView callHandler:@"JS Echo" data:nil responseCallback:^(id responseData) {
	NSLog(@"ObjC received response: %@", responseData);
}];

Copy and paste setupWebViewJavascriptBridge into your JS:

function setupWebViewJavascriptBridge(callback) {
	 return callback(WebViewJavascriptBridge); 
}

Finally, call setupWebViewJavascriptBridge and then use the bridge to register handlers and call ObjC handlers:

setupWebViewJavascriptBridge(function(bridge) {
	
	/* Initialize your app here */

	bridge.registerHandler('JS Echo', function(data, responseCallback) {
		console.log("JS Echo called with:", data)
		responseCallback(data)
	})
	bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
		console.log("JS received response:", responseData)
	})
})

Any question.

You can watch this chinese video https://www.youtube.com/watch?v=4JUNQkohh5E.
English video https://www.youtube.com/watch?v=POohaYA-ew0.
Also you can contact me with:housenkui@gmail.com or WeChat :housenkui

如果你有疑问.

你可以观看中文版的视频介绍:https://www.youtube.com/watch?v=4JUNQkohh5E
或者英文版的:https://www.youtube.com/watch?v=POohaYA-ew0 https://v.youku.com/v_show/id_XNDYwNzUwODgwNA==.html
当然你也可以邮件联系我:housenkui@gmail.com 或者微信:housenkui

houweifeng/WebViewJavascriptBridge