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

2018-05-30 本文已影响570人 CoderXLL

一、聊点废话

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拦截url</title>
    <script language="javascript">
        function loadURL(url) {
            var iFrame;
            iFrame = document.createElement("iframe");
            iFrame.setAttribute("src", url);
            iFrame.setAttribute("style", "display:none;");
            iFrame.setAttribute("height", "0px");
            iFrame.setAttribute("width", "0px");
            iFrame.setAttribute("frameborder", "0");
            document.body.appendChild(iFrame);
            // 发起请求后这个iFrame就没用了，所以把它从dom上移除掉
            iFrame.parentNode.removeChild(iFrame);
            iFrame = null;
        }
        /*拦截function*/
        function testBtnClick() {
            loadURL('mamami://click')
        }
    </script>

</head>
<body>
<button onclick="testBtnClick()">移动端拦截</button>
</body>
</html>

如上，简单搞一个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如何实现的。但是遇到不靠谱或者喜欢甩锅的前端开发，多了解些东西，对他们甩来的锅可以很好地防御过去。就这样~