Skip to content

liyuunxiangGit/JS-OC-WebView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 

Repository files navigation

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);
    }];
}

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published