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