js交互 | kysonyangs

2020-05-02 更新

iOS与JS交互的方法：

拦截url（适用于UIWebView和WKWebView）
JavaScriptCore（只适用于UIWebView，iOS7+）苹果将要放弃UIWebView了
WKScriptMessageHandler（只适用于WKWebView，iOS8+）
WebViewJavascriptBridge（适用于UIWebView和WKWebView，属于第三方框架）

现在貌似很多APP都有需求利用HTML5,所以我们需要了解iOS中JavaScript和OC交互的实现。
新建一个工程，添加一个空文件index.html

<html>
    <!-- 网页的描述信息 -->
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <script>
            function event()
            {
                alert("调用JS方法成功哦~");
            }
        </script>
    </head>
    <!-- 网页的具体内容 -->
    <body>
        JS调用OC哦~~
        <button style="background: blue; width:100px; height:30px;" onclick="event();">JS调用OC</button>
        <br>
        <a href="http://www.baidu.com">百度</a>
    </body>
</html>

Objective-C语言调用JavaScript语言

通过UIWebView的 - (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
方法实现，利用该方法执行一段JavaScript代码。（JavaScript: 以下使用JS代替）

获取当前网页的标题

1	self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title;"];

获取当前网页的网址URL

1	NSLog(@"%@", [webView stringByEvaluatingJavaScriptFromString:@"document.location.href;"]);

调用JS的方法

1	[webView stringByEvaluatingJavaScriptFromString:@"klevent();"]

以上执行情况如下

如果是自己写的HTML5网页，你可以控制里面的元素删除或者添加之类的，当然你得先懂点HTML5-JS知识

1
2
3

NSString *str = @"var p = document.getElementsByTagName('p')[0];"
                 "p.remove();";
[webView stringByEvaluatingJavaScriptFromString:str];

JS调用OC的方法

先来个简单的不带参数

// 1. 先改变index.html中
        function event()
        {
            location.href = 'kl://';
        }
// 2. 在webView的代理方法中实现
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

    // 获取将要加载的URL
    NSString *url = request.URL.absoluteString;
    NSString *scheme = @"kl://";
    // 判断是否包含
    if ([url hasPrefix:scheme]) {
        [self js1];
        return NO;
    }

    NSLog(@"加载其他请求，不是调用OC的方法");
    return YES;
}

有一个参数

// 1. 先改变index.html中
        function event()
        {
            location.href = 'kl://one=kellen';
        }
// 2. 在webView的代理方法中实现
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

    // 获取将要加载的URL
    NSString *url = request.URL.absoluteString;
    NSString *scheme = @"kl://";
    if ([url hasPrefix:scheme]) {
        // 获得协议后面的路径  path == js2?one=kellen
        NSString *path = [url substringFromIndex:scheme.length];
        // 利用?切割路径
        NSArray *subpaths = [path componentsSeparatedByString:@"?"];
        // 方法名 methodName == js2
        NSString *methodName = [[subpaths firstObject] stringByAppendingString:@":"];
        // 参数  kellen
        NSString *param = [subpaths lastObject];
        [self performSelector:NSSelectorFromString(methodName) withObject:param];
        // 当然，你也可以只获得参数，调用的方法名自己写
        return NO;
    }

    NSLog(@"加载其他请求，不是调用OC的方法");
    return YES;
}

有两个或多个参数

// 1. 先改变index.html中
        function event()
        {
            location.href = 'kl://js3_two_?one=kellen&two=Yangs';
        }
// 2. 在webView的代理方法中实现
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

    // 获取将要加载的URL
    NSString *url = request.URL.absoluteString;
    NSString *scheme = @"kl://";
    if ([url hasPrefix:scheme]) {
        // 获得协议后面的路径  path == js3_two_?one=kellen&two=Yangs
        NSString *path = [url substringFromIndex:scheme.length];
        // 利用?切割路径
        NSArray *subpaths = [path componentsSeparatedByString:@"?"];
        // 方法名 methodName == js3_two_
        NSString *methodName = [[subpaths firstObject] stringByReplacingOccurrencesOfString:@"_" withString:@":"];
        // 参数  one=kellen&two=Yangs
        NSString *param = [subpaths lastObject];
        NSArray *subparams = nil;
        if (subpaths.count == 2 || [param containsString:@"&"]) {
            subparams = [param componentsSeparatedByString:@"&"];
        }
        // 取出前面的2个参数
        NSString *firstParam = [subparams firstObject];
        NSString *secondParam = subparams.count <= 1 ? nil : [subparams lastObject];

        [self performSelector:NSSelectorFromString(methodName) withObject:firstParam withObject:secondParam];

        return NO;
    }
    NSLog(@"加载其他请求，不是调用OC的方法");
    return YES;
}

有个三方库可以方便开发