UIWebview 与WKWebview

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