原生JS交互（一）—— UIWebView拦截URL

一、聊点废话

先啰嗦两句。。。
移动端开发的时候，很多时候会出现这样的情况，有些页面用H5来写，移动端使用UIWebView或WKWebView进行加载。偶尔会出现交互的情况，这都很正常。
写这篇文章的初衷有两个：

根本原因：想涉足到混合开发方面，所以从最开始的WebView入手。
直接原因：新公司前端开发人员，针对这个功能无法实现，很自信地认为是我的问题。（坑-_-）

所以想帮助前端搞清楚原因，同时要彻底搞明白JS与OC交互实现细节与流程。

二、UIWebView拦截URL（JS与原生实现）

1. 首先先写一个简单的前端代码。（JS重要的一步）




    
    拦截url

如上，简单搞一个button标签，其相应function，我们用js调用loadURL这个function。js处理的其实就是创建一个页面，然后将这个页面移除（做一个跳转的假象）。这样移动端既可以拦截loadURL里的参数，H5那边也不会跳转至别的页面。实现思路来源于UIWebView的使用总结——唐巧。

2.UIWebView加载HTML

UIWebView *webView = [[UIWebView alloc] init];
NSString *path = [[NSBundle mainBundle] pathForResource:@"first" ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
NSURL *url = [[NSURL alloc] initWithString:path];
[webView loadHTMLString:htmlString baseURL:url];
webView.delegate = self;
[self.view addSubview:webView];
self.webView = webView;

3.UIWebView代理拦截URL

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString *urlStr = request.URL.absoluteString;
    if ([urlStr rangeOfString:@"mamami://click"].length > 0)
    {
        NSLog(@"拦截成功");
        return NO;
    }
    return YES;
}

4.UIWebView 原生调用JS （这种function，前端要放在window下，写成全局没用。为什么前端蜜汁自信window下的function与全局function一样呢？）

我们在JS里增加一个function，功能是1秒后弹窗alert

function ocInvoke(param01, param02) {
     var content = param01+","+param02;
     setTimeout(function () {
          alert(content);
      },1);
}

使用UIWebView调用JS方法，如下

NSString *jsStr = [NSString stringWithFormat:@"ocInvoke('%@','%@')", @"我", @"是"];
[self.webView stringByEvaluatingJavaScriptFromString:jsStr];

三、总结

大部分情况下，作为移动端的我们是不用去考虑JS如何实现的。但是遇到不靠谱或者喜欢甩锅的前端开发，多了解些东西，对他们甩来的锅可以很好地防御过去。就这样~