什么是WebView？
UIWebView是iOS内置的浏览器空间
系统自带的Safari浏览器就是通过UIWebView实现的
UIWebView不但能加载远程的网络资源，还能加载绝大部分的常见文件
html\htm
pdf、doc、ppt、txt
mp4
加载本地文件
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileUrlWithPath:".../ppt"]]];
UIWebView的基础使用 (常用属性和方法)
// 网页内容缩小到适应整个设备屏幕
self.webView.scalesPageToFit = YES;
#pragma mark - webview返回或前往方法
// 返回是否能返回上一个页面的bool值
[self.webView canGoBack];
// 返回是否能进入下一个界面的bool值
[self.webView canGoForward];
// 返回上一个页面
[self.webView goBack];
// 进入下一个界面（之前进入过的界面）
[self.webView goForward];
#pragma mark - 重载 webView
[self.webView reload];
#pragma mark - 设置内边距
self.webView.scrollView.contentInset = UIEdgeInsetsMake(64, 0, 44, 0);
#pragma mark - 检测各种特殊的字符串：比如电话、网站
self.webView.dataDetectorTypes = UIDataDetectorTypeAll;
#pragma mark - 加载方式
// 第一种：加载本地html文件
[self.webView loadRequest:[NSURLRequest requestWithURL:[[NSBundle mainBundle] URLForResource:@"test" withExtension:@"html"]]];
// 第二种：加载网页链接
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL
// 第三种：加载本地文件
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:@"/Users/zhongwangheyi/Desktop/demo.pptx"]]];
// 第四种：加载标签文本
[self.webView loadHTMLString:@"<html><body><div style=\\"color: red; font-size:10px; border:1px solid blue;\\">哈哈哈哈哈</div></body></html>" baseURL:nil];
// 第五种：加载data数据
[self.webView loadData:<#(NSData *)#> MIMEType:<#(NSString *)#> textEncodingName:<#(NSString *)#> baseURL:<#(NSURL *)#>];
#pragma mark - <UIWebViewDelegate> 代理方法
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
// NSLog(@"%s", __func__);
}
- (void)webViewDidStartLoad:(UIWebView *)webView
{
// NSLog(@"%s", __func__);
}
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{
// NSLog(@"%s", __func__);
}
/**
* 每当webView即将发送一个请求之前，都会调用这个方法
* 返回YES：允许加载这个请求
* 返回NO：禁止加载这个请求
*/
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
if ([request.URL.absoluteString containsString:@"map"]) return NO;
return YES;
}
@end
UIWebView通过JS调用OC
第一种方法:
<html>
<!-- 网页的描述信息 -->
<head>
<meta charset="UTF-8">
<title>js调用oc方法</title>
<script>
function call(){
// 自定义协议Scheme
// 设置参数方法和参数
location.href = 'lyon://name_number_?&10086';
}
</script>
</head>
<!-- 网页的具体内容 -->
<body>
<button style="background: gray; width:150px; height:25px;" onclick="call();">拨打电话10086</button>
<br>
<br>
<a
</body>
</html>
#import "ViewController.h"
@interface ViewController () <UIWebViewDelegate>
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.webView loadRequest:[NSURLRequest requestWithURL:[[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"]]];
}
- (void)name:(NSString *)name number:(NSString *)number
{
// 拨打电话
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:[NSString stringWithFormat:@"telprompt://%@",number]]];
}
#pragma mark - <UIWebViewDelegate>
/**
* 通过这个方法完成JS调用OC
* JS和OC交互的第三方框架：WebViewJavaScriptBridge
*/
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
/** url = lyon://name_number_?lyon&10086 */
NSString *url = request.URL.absoluteString;
NSString *scheme = @"lyon://";
if ([url hasPrefix:scheme]) {
// 获得协议后面的路径
// path == name_number_?lyon&10086
NSString *path = [url substringFromIndex:scheme.length];
NSArray *subpaths = [path componentsSeparatedByString:@"?"];
// 方法名 methodName = name:number:
NSString *methodName = [[subpaths firstObject] stringByReplacingOccurrencesOfString:@"_" withString:@":"];
// 参数 lyon&10086
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;
} else {
// 其他操作
}
return YES;
}
@end
在iOS 7之后，apple添加了一个新的库JavaScriptCore，用来做JS交互，因此JS与原生OC交互也变得简单了许多。首先导入JavaScriptCore库, 然后在OC中获取JS的上下文
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
再然后定义好JS需要调用的方法，例如JS要调用share方法：则可以在UIWebView加载url完成后，在其代理方法中添加要调用的share方法：
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//定义好JS要调用的方法, share就是调用的share方法名
context[@"share"] = ^() {
NSLog(@"+++++++Begin Log+++++++");
NSArray *args = [JSContext currentArguments];
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"方式二" message:@"这是OC原生的弹出窗" delegate:self cancelButtonTitle:@"收到" otherButtonTitles:nil];
[alertView show];
});
for (JSValue *jsVal in args) {
NSLog(@"%@", jsVal.toString);
}
NSLog(@"-------End Log-------");
};
}
注意：可能最新版本的iOS系统做了改动，现在（iOS9，Xcode 7.3，去年使用Xcode 6 和iOS 8没有线程问题）中测试,block中是在子线程，因此执行UI操作，控制台有警告，需要回到主线程再操作UI。
其中相对应的html部分如下：
<html>
<header>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function secondClick() {
share('分享的标题','分享的内容','图片地址');
}
function showAlert(message){
alert(message);
}
</script>
</header>
<body>
<h2> 这里是第二种方式 </h2>
<br/>
<br/>
<button type="button" onclick="secondClick()">Click Me!</button>
</body>
</html>
JS部分确实要简单的多了。
OC调用JS篇
方式一
NSString *jsStr = [NSString stringWithFormat:@"showAlert('%@')",@"这里是JS中alert弹出的message"];[_webView stringByEvaluatingJavaScriptFromString:jsStr];
注意：该方法会同步返回一个字符串，因此是一个同步方法，可能会阻塞UI。
方式二
继续使用JavaScriptCore库来做JS交互。
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];NSString *textJS = @"showAlert('这里是JS中alert弹出的message')";[context evaluateScript:textJS];
重点：stringByEvaluatingJavaScriptFromString
是一个同步的方法，使用它执行JS方法时，如果JS 方法比较耗的时候，会造成界面卡顿。尤其是js 弹出alert 的时候。alert 也会阻塞界面，等待用户响应，而stringByEvaluatingJavaScriptFromString
又会等待js执行完毕返回。这就造成了死锁。官方推荐使用WKWebView
的evaluateJavaScript:completionHandler:
代替这个方法。其实我们也有另外一种方式，自定义一个延迟执行alert 的方法来防止阻塞，然后我们调用自定义的alert 方法。同理，耗时较长的js 方法也可以放到setTimeout 中。
function asyncAlert(content) { setTimeout(function(){ alert(content); },1);}