https://github.com/octree/octwebviewbridge

WKWebView Javascript Bridge
https://github.com/octree/octwebviewbridge

bridge ios javscript webview wkwebview

Last synced: 3 months ago
JSON representation

WKWebView Javascript Bridge

• Host: GitHub
• URL: https://github.com/octree/octwebviewbridge
• Owner: octree
• License: mit
• Created: 2017-03-22T05:58:56.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2019-02-12T06:56:03.000Z (almost 6 years ago)
• Last Synced: 2024-10-11T04:04:44.225Z (4 months ago)
• Topics: bridge, ios, javscript, webview, wkwebview
• Language: Objective-C
• Size: 112 KB
• Stars: 6
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![img](https://img.shields.io/github/license/octree/OCTWebViewBridge.svg)

![img](https://img.shields.io/cocoapods/v/OCTWebViewBridge.svg?style=flat)

## OCTWebViewBridge

起源于在老东家工作的时候的库 [YJWebView](https://github.com/TinydustDevelopers/YJWebView)

在 WKWebView 中使用 `Javascript` 调用 Native 代码，支持函数作为参数。

```javascript

window.native.foo(param1, param2, (foo, bar) => {

}, (error) => {  })

```

## Installation

```shell

pod 'OCTWebViewBridge'

```

## How To Use

### Custom Plugin

javascript file（log.js）:

```javascript

window.bridge.log = function(msg) {

window.bridge.invoke("me.octree.bridge.log", "log:", msg)

}

```

objective-c code

```objectivec

@interface OCTLogPlugin : NSObject 

@property (copy, nonatomic, readonly) NSString *identifier;

@property (copy, nonatomic, readonly) NSString *javascriptCode;

@end

@implementation OCTLogPlugin

- (NSString *)identifier {

    

    return @"me.octree.bridge.log";

}

- (NSString *)javascriptCode {

    

    NSString *path = [[NSBundle bundleForClass:[self class]] pathForResource:@"log" ofType:@"js"];

    return [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:NULL];

}

- (void)log:(id)msg {

    NSLog(@"WebView Bridge: %@", [msg description]);

}

@end

```

inject plugin 

```objectivec

[[OCTWebViewPluginInjector injectorForWebView:webView] injectPlugin:[[OCTLogPlugin alloc] init]];

```

javascript 调用 Native 代码

```

window.bridge.log("yoooooooo man")

```

### Block Plugin

使用 Block 的方式为 Web 提供插件。

Web 调用时，会执行这个 Block

```objectivec

[[OCTWebViewPluginInjector injectorForWebView:_webView] injectPluginWithFunctionName:@"test" handler:^(NSDictionary *data) { 

    NSLog(@"%@", data);

}];

[[OCTWebViewPluginInjector injectorForWebView:_webView] injectPluginWithFunctionName:@"test2" handlerWithResponseBlock:^(NSDictionary *data, OCTResponseCallback responseCallback) {

   NSLog(@"test2: %@", data);

   responseCallback(@{ @"hello" : @"world" });

}];

```

在 Web 中调用

```javascript

window.bridge.plugin.test({'hello': 'world'})

window.bridge.plugin.test2({'hello': 'world'}, function(json) {

  window.bridge.log(JSON.stringify(json))

})

```

### CSS Injector

注入 CSS 代码

```objectivec

// inject css

[[OCTWebViewPluginInjector injectorForWebView:_webView] injectCSSString:@"body {background-color: #eeeeee;}" forIdentifier:@"test"];

// remove css

[[OCTWebViewPluginInjector injectorForWebView:_webView] removeCSSStringForIdentifier:@"test"];

```

### Night Mode 

开启网页夜间模式

```objectivec

// enable night mode

[self.webView oct_nightFall];

// disable night mode

[self.webView oct_sunrise];

```

## License

OCTWebViewBridge is released under the MIT license. See LICENSE for details.