Skip to content

An iOS/OSX bridge for sending messages between Obj-C and JavaScript in UIWebViews/WebViews

License

Notifications You must be signed in to change notification settings

marcuswestin/WebViewJavascriptBridge

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

40a76cf · Mar 27, 2020
Dec 25, 2016
Mar 26, 2020
Nov 8, 2017
Mar 26, 2020
Apr 24, 2013
Dec 27, 2016
Mar 31, 2015
Nov 8, 2017
Mar 27, 2020
Dec 13, 2016
Nov 8, 2017
Nov 8, 2017

Repository files navigation

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

  1. 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;
}
  1. Register a handler in ObjC, and call a JS handler:
[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);
}];
  1. Copy and paste setupWebViewJavascriptBridge into your JS:
function setupWebViewJavascriptBridge(callback) {
	 return callback(WebViewJavascriptBridge); 
}
  1. 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:[email protected] or WeChat :housenkui