webviewjs事件,webview 執行js

本文目錄一覽：

• 1、iOS WKWebView與H5交互，JS調OC傳值、OC調JS傳值、進度條載入等(乾貨滿滿)
• 2、Android webview中的js如何監聽鍵盤事件
• 3、WKWebView js方法的使用

iOS WKWebView與H5交互，JS調OC傳值、OC調JS傳值、進度條載入等(乾貨滿滿)

WKWebView是蘋果在iOS 8之後推出的框架，關於它比webview的優勢這裡就不講了。主要說一下與JS交互的問題，其實WKWebView已經內置了JS與OC的互調、傳值等方法，使用起來也非常方便，下面就來細細的探討一下以及自己遇到過的坑…

首先來看下WKWebView的初始化相關設置：

一、導入相關頭文件、設置相關代理和屬性

二、WKWebView初始化

注意:

樓主遇到的第一個坑：如果JS給OC傳值為空，必須寫成: postMessage(null)，如果什麼都不寫，方法是調不通的。

1、在viewWillAppear中配置， addScriptMessageHandler name: “這裡就是JS的方法，方法名必須統一”

樓主遇到的第二個坑：配置完後必須在 viewWillDisappear 中 remove，否則會造成循環引用，導致crash

2、實現 WKScriptMessageHandler 協議

以上就是JS調OC，JS向OC傳值…

樓主這裡舉三個例子：

1: webview載入完成前，將用戶信息傳給js

2: webview載入完成，將相關信息傳給js

3: 調用相冊或相機時，將選擇的圖片請求後台介面，後台返回圖片地址，將該地址回傳給H5，H5將圖片顯示到頁面上

第一個例子: webView載入完成前傳值

因為 evaluateJavaScript 方法默認是在載入完成後調用，所以直接在頁面開始載入中調用是傳不過去的，這個時候怎麼辦呢？ 我們可以讓js端寫兩個方法， 第一個方法是js端開始向oc端發起信息需求的方法名，當oc端收到該方法名的時候，就去調用js端第二個獲取傳值的方法，把信息傳遞過去。

先讓JS端寫個方法調OC，OC實現方法後在這個方法內部給JS傳值

在WKScriptMessageHandler協議中，實現該方法，然後在方法內部給JS傳值

注意： 以上就是在Webview載入完成前傳值，如果列印沒報錯，證明傳參成功，如果web端沒收到，讓他把獲取到值的方法寫到頁面中即可。

第二個例子: webView載入完成,傳值給js

第三個例子: 傳圖片地址給js，js拿到後顯示圖片

1：拍照事件

1.1：將拍的照片請求上傳圖片介面，成功返回圖片地址，並傳值給H5

2: 從相冊中選取照片

2.2：將相冊中選取的照片請求上傳圖片介面，成功返回圖片地址，並傳值給H5

注意: getPhotoCallback 即為調用的方法名，後面傳值格式必須為: (”) ， 這裡遇到了第三個坑， 如果方法名寫為: 名稱.名稱 (例如：hello. getPhotoCallback)，這種是調不通的，可以寫成hello_getPhotoCallback的形式，一般的話最好還是定義一個完整的名稱。 剛開始這個問題卡了比較久，一直調不通，在此記錄一下…..

在 viewDidLoad 中註冊進度條監聽

開始載入網頁

載入完成

載入失敗

頁面跳轉失敗

progressView懶載入

添加監聽觀察者

最後別忘記 removeObserver

Demo地址:

Android webview中的js如何監聽鍵盤事件

首先，設置webView屬性：

其次，設置WebChromeClient：

如此，webView中就可以捕獲javascript的alert()、confirm()事件了。

WKWebView js方法的使用

一、h5 調用 OC，給OC傳值

   1、在WKWebview初始化的時候，先註冊JS方法

       //這個類主要用來做native與JavaScript的交互管理

       WKUserContentController * wkUController = [[WKUserContentController alloc] init];

        //註冊一個name為jsToOcNoPrams的js方法，設置處理接收JS方法的代理

        [wkUController addScriptMessageHandler:self  name:@”jsToOcNoPrams”];

       [wkUController addScriptMessageHandler:self name:@”jsToOcWithPrams”];

        config.userContentController = wkUController;

2、攔截js方法，接收參數

注意：遵守WKScriptMessageHandler協議，代理是由WKUserContentControl設置

  //通過接收JS傳出消息的name進行捕捉的回調方法

– (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{

    NSLog(@”name:%@\\\\n body:%@\\\\n frameInfo:%@\\\\n”,message.name,message.body,message.frameInfo);

    //用message.body獲得JS傳出的參數體

    NSDictionary * parameter = message.body;

    //JS調用OC

    if([message.name isEqualToString:@”jsToOcNoPrams”]){

        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@”js調用到了oc” message:@”不帶參數” preferredStyle:UIAlertControllerStyleAlert];

        [alertController addAction:([UIAlertAction actionWithTitle:@”OK” style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

        }])];

        [self presentViewController:alertController animated:YES completion:nil];

    }else if([message.name isEqualToString:@”jsToOcWithPrams”]){

        UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@”js調用到了oc” message:parameter[@”params”] preferredStyle:UIAlertControllerStyleAlert];

        [alertController addAction:([UIAlertAction actionWithTitle:@”OK” style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

        }])];

        [self presentViewController:alertController animated:YES completion:nil];

    }

}

3、在webview釋放註銷之前移除js方法

      //移除註冊的js方法

        [[_webView configuration].userContentController removeScriptMessageHandlerForName:@”jsToOcNoPrams”];

二、oc調用H5，給H5傳值

1、//OC調用JS changeColor()是JS方法名，completionHandler是非同步回調block

    NSString *jsString = [NSString stringWithFormat:@”changeColor(‘%@’)”, @”Js參數”];

    [_webView evaluateJavaScript:jsString completionHandler:^(id _Nullable data, NSError * _Nullable error) {

        NSLog(@”改變HTML的背景色”);

    }];

//改變字體大小 調用原生JS方法

    NSString *jsFont = [NSString stringWithFormat:@”document.getElementsByTagName(‘body’)[0].style.webkitTextSizeAdjust= ‘%d%%'”, arc4random()%99 + 100];

    [_webView evaluateJavaScript:jsFont completionHandler:nil];

2、// 頁面載入完成之後調用

– (void)webView:(WKWebView*)webView didFinishNavigation:(WKNavigation*)navigation{

    [SVProgressHUDdismiss];

NSString* jsStr = [NSStringstringWithFormat:@”payResult(‘%@’)”,@”true”];

[self.webView evaluateJavaScript:jsStrcompletionHandler:^(id_Nullable result,NSError* _Nullable error) {

NSLog(@”==%@—-%@”,result, error);

    }];

}