UIWebView,WKWebView 与js交互

Posted 2020-06-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了UIWebView,WKWebView 与js交互相关的知识，希望对你有一定的参考价值。

现在越来越多的APP需要进行网页之间的交互了，而在ios中，加载网页的方式为UIWebView与WKWebView这两个控件。

今天就来讲一讲这两个控件怎么进行js交互吧。至于这两个控件之间的区别应该都懂。。那我就不说了。

1、UIWebView

- (nullable NSString *)stringByEvaluatingjavascriptFromString:(NSString *)script;

在UIWebView中提供了这个方法，这个方法就是用来执行js的

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
            <title>Title</title>
            
            <style>
                p{
                    text-align: center;
                    margin-top: 20px;
                }
            button{
                
                margin-left: 40%;
            }
                </style>
    </head>
    <body id="body">
        
        <p id="p">4秒后被删除</p>
        
        <button onclick="clickButtonFunc()">调用相册</button>
        
        <script type="text/javascript">
            
            
            function clickButtonFunc(){
                
                window.location.href = ‘pickView‘;
            }
        </script>
    </body>
</html>

这段是html的代码。

-(NSString *)javaScriot
{
    NSString * p = @"var  p = document.getElementById(‘p‘);";
    NSString * r = @"p.remove();";
    NSString * java = [NSString stringWithFormat:@"%@%@",p,r];
    return java;
}

        [self.webView stringByEvaluatingJavaScriptFromString:[self javaScriot]];

执行这段代码就是删除网页上的一个p标签，这个是oc调用js，那么当然也有js调用oc的情况

这两个是UIWebView的代理方法

是否允许执行网页请求。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

开始执行网页请求

- (void)webViewDidStartLoad:(UIWebView *)webView;

你可以在这两个代理中任选一个实现以下代码，而我是在第一个执行的

    if ([webView.request.URL.lastPathComponent isEqualToString:@"pickView"])
    {
        NSLog(@"pickView");
        UIImagePickerController * pick = [UIImagePickerController new];
        pick.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
        pick.delegate = self;
        [self presentViewController:pick animated:YES completion:nil];
    }

但你点击网页上的按钮是，就可以调用系统相册了。这些就是UIWebView的js交互了

接下来就是WKWebView

同样的，WKWebView也提供了调用js的函数

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ __nullable)(__nullable id, NSError * __nullable error))completionHandler;

这个就是WKWebView调用js的函数了

    [_webView evaluateJavaScript:@"var p = document.getElementById(‘p‘);" completionHandler:nil];

同样的，效果依旧是删除网页上的p标签。

还有就是js调用oc的了，虽然在网上有很多文档，但是我没有用那些的文档，我用的依旧是代理方法。

- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation

加载网页的时候会调用

依旧是执行上面的判断语句。可以打开系统相册。

以上这些就是oc与js之间的相互调用了。如果大家有更好的方法，欢迎大家一起讨论。由于代码量并不是很多，再加上代码写的比较乱，demo句不拿出来了。

下次回合大家讲一讲JavaScriptCore 来进行js的交互的。

以上是关于UIWebView,WKWebView 与js交互的主要内容，如果未能解决你的问题，请参考以下文章

iOS WKWebView JS 与原生交互小结

iOS下JS与OC互相调用--WKWebView 拦截URL

H5 与Native的交互方案

iOS下JS与原生的交互二

iOS 和 H5 页面交互（WKWebview 和 UIWebview cookie 设置）

iOS下JS与OC互相调用--UIWebView 拦截URL