linvinglor/js-oc-webview

WKWebView实现js交互,实现WebView中的图片浏览与操作等功能（功能很强大👍）

JS-OC-WebView

WKWebView实现js交互

利用WKWebView  
 

• 1、实现js交互，js调用native,native调用js  
   
• 2、实现WebView中的图片浏览功能。点击可以放大。    
         
• 3、实现图片长按进行保存功能。                      
               
• 4、实现了webview中的文字长按copy功能。
   

JS-OC-WebView 代码实现详解  

1、首先创建控制器WKMianWebViewController

2、然后控制器中继承如下类：

#import <WebKit/WebKit.h>
#import <AVFoundation/AVFoundation.h>
#import "WKWebViewJavascriptBridge.h"
#import "SDWebView.h"

3、准备工作：

• 1、设置代理

WKNavigationDelegate,WKUIDelegate

• 2、在.h文件中

@property (strong, nonatomic)   SDWebView  *webView;
@property WKWebViewJavascriptBridge *webViewBridge;

4、代码阶段：

• 1、viewDidLoad中初始化webView,实现[self initWKWebView]方法。方法如下：

- (void)initWKWebView
{
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    configuration.userContentController = [WKUserContentController new];
    
    WKPreferences *preferences = [WKPreferences new];
    preferences.javaScriptCanOpenWindowsAutomatically = YES;
    preferences.minimumFontSize = 30.0;
    configuration.preferences = preferences;
    
    SDWebView *webView = [[SDWebView alloc] initWithFrame:self.view.frame configuration:configuration];
    self.webView = webView;
    //如果是本地html，用下面方法：
    NSString *urlStr = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil];
    NSString *localHtml = [NSString stringWithContentsOfFile:urlStr encoding:NSUTF8StringEncoding error:nil];
    NSURL *fileURL = [NSURL fileURLWithPath:urlStr];
    [webView loadHTMLString:localHtml baseURL:fileURL];
    //如果是网址，用下面的方法：
    //    [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://tbk.xxtapp.cn/test/unitActivity/hybrid.html?s=2"]]];
    webView.UIDelegate = self;
    [self.view addSubview:webView];
}

• 2、然后初始化webViewBridge并注册代理。

 _webViewBridge = [WKWebViewJavascriptBridge bridgeForWebView:self.webView];
 [_webViewBridge setWebViewDelegate:self.webView];

• 3、最后注册js交互的方法，如demo所示：

[self registerNativeFunctions];

• registerNativeFunctions方法的实现

#pragma mark - private method
- (void)registerNativeFunctions
{
    
    [self registTestOneFunction];
}
-(void)registTestOneFunction
{
    
    [_webViewBridge registerHandler:@"testOCFunction" handler:^(id data, WVJBResponseCallback responseCallback) {
        
        // data 的类型与 JS中传的参数有关
        NSDictionary *tempDic =  [self JSONStringToDictionaryWithData:data];;
        // 在这里执行分享的操作
        NSString *title = [tempDic objectForKey:@"title"];
        NSString *content = [tempDic objectForKey:@"content"];
        NSString *url = [tempDic objectForKey:@"url"];
        
        // 将分享的结果返回到JS中
        NSString *result = [NSString stringWithFormat:@"js调用native成功成功:\ntitle=%@\n,content=%@\n,url=%@",title,content,url];
        responseCallback(result);
    }];
}