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

    }];

}