一、聊点废话
先啰嗦两句。。。
移动端开发的时候，很多时候会出现这样的情况，有些页面用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如何实现的。但是遇到不靠谱或者喜欢甩锅的前端开发，多了解些东西，对他们甩来的锅可以很好地防御过去。就这样~
网友评论