最简单的UIWebView与WKWebView 和JS交互附加WKWebView 加载进度条返回上一页与退出

很多时候加载网页都需要显示进度条，返回上一页和退出功能。很简单的东西，但有时候会忘记，写一个Demo作下记录。

1.用UIProgressView控件来作为进度条

    CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
    CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
    UIProgressView *progress = [[UIProgressView alloc] initWithFrame:CGRectMake(0, 64, screenWidth, 2)];
    self.progress.transform = CGAffineTransformMakeScale(1.0, 1.5);
    self.progress.backgroundColor = [UIColor blueColor];
    [self.view addSubview:progress];
    self.progress = progress;

2.初始化WKWebView

    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    config.allowsInlineMediaPlayback = YES;
    config.allowsPictureInPictureMediaPlayback = YES;
    WKWebView *web = [[WKWebView alloc] initWithFrame:CGRectMake(0, 64, screenWidth, screenHeight - 64) configuration:config];
    [self.view addSubview:web];
    web.navigationDelegate = self;
    web.UIDelegate = self;

    self.web = web;

3.添加观察者，WKWebView中的estimatedProgress属性即表示加载进度，另外记得观察者要在析构方法中移除

4.关闭按钮很简单直接pop，返回按钮判断web可以返回则返回不能返回也pop

    if ([self.web canGoBack]) {
        [self.web goBack];
    } else{
       
        [self.navigationController popViewControllerAnimated:YES];

    }

5.在观察者中将进度赋值到进度条

    if ([keyPath isEqualToString:@"estimatedProgress"]) {
        
        self.progress.progress = self.web.estimatedProgress;
        if (self.progress.progress == 1) {
            
            //将progress高度变成1.4倍 在开始加载网页的代理中会恢复1.5倍
            __weak typeof(self)weakSelf = self;
            [UIView animateWithDuration:0.25 delay:0.3 options:UIViewAnimationOptionCurveEaseOut animations:^{
                
                weakSelf.progress.transform = CGAffineTransformMakeScale(1.0, 1.4);
            
            } completion:^(BOOL finished) {
               
                weakSelf.progress.hidden = YES;
            }];
        }
    }

6.再简单实现以下web的代理方法就搞定了

#pragma mark WKNavigationDelegate
    //开始加载
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{
    

    self.progress.hidden = NO;
    self.progress.transform = CGAffineTransformMakeScale(1.0, 1.5);
    [self.view bringSubviewToFront:self.progress]; // 将progress放到最前面
}

//加载完成
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    
//    self.progress.hidden = YES;
}
//加载失败
- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error{
    
    self.progress.hidden = YES;
}
//页面跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    //允许页面跳转
    NSLog(@"%@",navigationAction.request.URL);
    //如果是跳转一个新页面
    if (navigationAction.targetFrame == nil) {
        [webView loadRequest:navigationAction.request];
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}

-----------------2018.4.18-------------------------

之前写过一个项目用到UIWebView与 JS交互，最近换成WK框架，发现不能用了。

还好学过一点js，然后通过自己随便写了一个简单的html本地文件，用来实现UIWebView与WKWebView跟JS之间的交互，尽量屏蔽掉了一些暂时不想关的代码，用最简单的方式实现。

UIWebView交互，引入框架<JavaScriptCore/JavaScriptCore.h>

JS调用OC用代码

self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

找到webView的 JSContext对象。

注意此处的“tytest”即JS上面定义好的方法名。

写在html onclick里面的方法名。

OC调用JS方法

   self.context = [self.web valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    NSString *js =[NSString stringWithFormat:@"tytest5(6)"] ;
    [self.context evaluateScript:js];

一样 “tytest5”为方法名括号里面是参数。

WKWebView交互

需要在创建的时候注入JS对象名称，即方法名

此处与UIWebView最大的不同是html的写法

图中标注1为UIWebView交互时的方法名，2为改方法在html中的声明，3才是WK交互时的对象，也就是我们之前注入的对象。这点需要注意。

然后OC调用JS的方法也是差不多的

另外还有就是WKWebView销毁时，需要注销之前注册的对象。正常释放有内存不能释放掉的问题，才引入了一个代理实现。 Demo有具体的实现方法。

***以上项目名称TYWKWebProgress&BackDemo

(欢迎随手给一颗星星哦~)本篇博客Demo地址https://github.com/xmy0010/DemoForCSDN

本人邮箱[email protected]欢迎小伙伴一起讨论，学习，进步。

最简单的UIWebView与WKWebView 和JS交互 附加WKWebView 加载进度条 返回上一页 与退出

猜你喜欢

最简单的UIWebView与WKWebView 和JS交互附加WKWebView 加载进度条返回上一页与退出