美文网首页
UIWebview 与WKWebview

UIWebview 与WKWebview

作者: 愚人船ios | 来源:发表于2017-11-12 13:46 被阅读76次

    1、UIWebview

    给UIWebview 添加一个头部(尾部同理)。

    // 1.先设置webview的scrollview内容上边距为要添加的头部的高度
       webView.scrollView.contentInset=UIEdgeInsetsMake(80, 0, 0, 0);
     // 2、把头部视图添加到webview的scrollview上 (注意:添加的视图的Y值是负的)
        UIView *titleview = [[UIView alloc] initWithFrame:CGRectMake(0, -70, SCREEN_MAIN_WIDTN, 70)];
        [self.web.scrollView addSubview:titleview];
    //  3、有时候设置了偏移量但是webview的scrollview的内容还是没动(添加了头部但是看不见) 这时候需要设置scrollview的内容向下偏移一个负值(让scrollview滚动顶部)
        [self.web.scrollView setContentOffset:CGPointMake(0, -80)];
    

    2、加载HTML字符串图片过宽超出屏幕

    //给img标签加上一个样式 限制宽度(需要修改其他样式同理)
     NSString *newWebStr = [webString stringByReplacingOccurrencesOfString:@"<img" withString:@"<img style=\"max-width:95%; height:auto\""];
    

    3、UIWebview 与JS交互

    JS 调用OC (js 调用方法都在子线程 操作UI 请切换到主线程 不然可能会崩溃)
    //1.1、JS 中写要调用的方法“callOCFunction”
    function clickBtn(){
            var dict = {"name":"tom","age":"20"};
            callOCFunction(dict);
         }
    //1.2、在OC中引入 “JavaScriptCore” 给JS 对象绑定方法
    #import <JavaScriptCore/JavaScriptCore.h>
    -(void)webViewDidFinishLoad:(UIWebView *)webView{
             JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        context[@"callOCFunction"]=^(NSDictionary *dic){
                NSLog(@"%@",dic);
        };
    }
    //2.1、另外一种方式是JS 端通过对象来调用OC 方法
    function clickBtn(){JS 中写要调用的方法“Obj.callOCFunction” Obj 是一个对象
            var dict = {"name":"tom","age":"20"};
            Obj.callOCFunction(dict);
         }
    //2.2、在OC中 给JS 对象绑定对象并遵守协议实现协议方法
    // 写一个协议 让你的类遵守这个协议
    @protocol JSObjcDelegate<JSExport>
    -(void)callOCFunction:(NSDictionary*)dic;
    @end
    
    -(void)webViewDidFinishLoad:(UIWebView *)webView{
       JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        context[@"Obj"]=self;// 绑定对象
      
    }
    // 实现协议方法
    -(void)callOCFunction:(NSDictionary *)dic{
        NSLog(@"%@",dic);
    }
    

    OC 调用JS

    //  'callJsFunction'为js中的一个方法 ‘JSValue’ 为返回值(UIWwebview)
    -(void)webViewDidFinishLoad:(UIWebView *)webView{
       JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        NSString *jsstr=[NSString stringWithFormat:@"callJsFunction('oc-str')"];
        JSValue *jsvaule = [context evaluateScript:jsstr];
        NSLog(@"%@",jsvaule);
    }
    // WKWebview 调用JS方法
    - (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation{
        NSLog(@"----down----");
        NSString *js = @"callJsFunction('hahaha')";//调用js方法
        [webView evaluateJavaScript:js completionHandler:^(id _Nullable response, NSError * _Nullable error) {
            NSLog(@"response:%@..error:%@",response,error);// js 调用结束的回调方法
        }];
    }
    

    4、WKWebview与JS交互

    // JS 调用OC
    #import <WebKit/WebKit.h>
    @interface WKWebVC ()<WKScriptMessageHandler,WKNavigationDelegate>
    @end
     //1、该对象提供了通过js向web view发送消息的途径
        WKUserContentController *userContentController = [[WKUserContentController alloc] init];
        //添加在js中操作的对象名称,通过该对象来向web view发送消息
        [userContentController addScriptMessageHandler:self name:@"FirstJsObect"];
    
        //2、配置wkwebview
        WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
        config.userContentController = userContentController;
        
        //3、通过初试化方法,生成webview对象并完成配置
        WKWebView *web=[[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
        NSString *path=[[NSBundle mainBundle] pathForResource:@"test" ofType:@"html"];
        
        [web loadFileURL:[NSURL fileURLWithPath:path] allowingReadAccessToURL:[NSURL fileURLWithPath:path]];
        web.navigationDelegate=(id)self;
    
    #pragma WKScriptMessageHandler  (需要实现这个协议方法 才能收到js 发过来的消息)
    - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
        
        NSLog(@"js 发送过来的数据----%@",message.body);
        
    }
    
    // js 中调用方式如下
    function clickBtn(){
          var dict = {"name":"tom","age":"20"};
           window.webkit.messageHandlers.FirstJsObect.postMessage(dict);
     }
    

    相关文章

      网友评论

          本文标题:UIWebview 与WKWebview

          本文链接:https://www.haomeiwen.com/subject/fvwnmxtx.html