iOS 网页-WebView(一)

2019-11-09 13:57:28

字体：大中小

来源：转载

供稿：网友

现在混合式移动端开发越来越流行，因为开发成本上、速度上都比传统的 app开发要好，混合式开发是传统模式与PC网页端相结合的模式。在android开发中有WebView作为混合开发的桥梁，当然iOS中也有同样一个UIWebView组件作为混合模式开发的桥梁。

UIWebView简介

UIWebView是UIKit库下内置的浏览器控件，它继承自UIView。可以通过UIWebView浏览网页，打开文档等多种功能。系统自带的Safari就是UIWebView实现的。

UIWebView的属性

@PRoperty (nullable, nonatomic, readonly, strong) NSURLRequest *request; //URL请求 @property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack; //获取能否返回上一级 @property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward; //获取能否跳转下一级 @property (nonatomic, readonly, getter=isLoading) BOOL loading; //获取是否正在加载数据 @property (nonatomic) BOOL scalesPageToFit; //适应屏幕大小 @property (nonatomic) BOOL detectsPhoneNumbers NS_DEPRECATED_IOS(2_0, 3_0); //iOS 2 －iOS 3 ，已经禁用，自动监测网页上的电话号码，单击可以拨打。 //此属性可以设定使电话号码、网址、电子邮件和符合格式的日期等文字改变为链接文字，电话号码点击后可以拨出电话， //网址点击后会用Safari打开，电子邮件会用mail打开，而符合格式的日期会弹出一个ActionSheet，有创建事件，在Calender中显示和拷贝三个选项。 @property (nonatomic) UIDataDetectorTypes dataDetectorTypes NS_AVAILABLE_IOS(3_0); @property (nonatomic) BOOL allowsInlineMediaPlayback NS_AVAILABLE_IOS(4_0); // iphone Safari defaults to NO. iPad Safari defaults to YES //设置网页中的视频是否自动播放，默认YES @property (nonatomic) BOOL mediaPlaybackRequiresUserAction NS_AVAILABLE_IOS(4_0); // iPhone and iPad Safari both default to YES //设置音频播放是否支持air play功能，默认YES @property (nonatomic) BOOL mediaPlaybackAllowsAirPlay NS_AVAILABLE_IOS(5_0); // iPhone and iPad Safari both default to YES //是否网页内容下载完毕才开始渲染web视图，默认NO @property (nonatomic) BOOL suppressesIncrementalRendering NS_AVAILABLE_IOS(6_0); // iPhone and iPad Safari both default to NO //设置用户交互默认YES @property (nonatomic) BOOL keyboardDisplayRequiresUserAction NS_AVAILABLE_IOS(6_0); // default is YES //一种模式，枚举，当网页的大小超出View时，将网页以翻页的效果展示 typedef NS_ENUM(NSInteger, UIWebPaginationMode) { UIWebPaginationModeUnpaginated, //不使用翻页效果 UIWebPaginationModeLeftToRight, //将网页超出部分分页，从左向右进行翻页 UIWebPaginationModeTopToBottom, //将网页超出部分分页，从上向下进行翻页 UIWebPaginationModeBottomToTop, //将网页超出部分分页，从下向上进行翻页 UIWebPaginationModeRightToLeft //将网页超出部分分页，从右向左进行翻页 } __TVOS_PROHIBITED; @property (nonatomic) UIWebPaginationMode paginationMode NS_AVAILABLE_IOS(7_0); @property (nonatomic) UIWebPaginationBreakingMode paginationBreakingMode NS_AVAILABLE_IOS(7_0); //设置分页模式 @property (nonatomic) CGFloat pageLength NS_AVAILABLE_IOS(7_0); //设置每一页的长度 @property (nonatomic) CGFloat gapBetweenPages NS_AVAILABLE_IOS(7_0); //设置每一页的间距 @property (nonatomic, readonly) NSUInteger pageCount NS_AVAILABLE_IOS(7_0); //分页数 //分屏中是否播放（iOS 9的新特性） @property (nonatomic) BOOL allowsPictureInPictureMediaPlayback NS_AVAILABLE_IOS(9_0); //长按链接是否支持预览（支持3D Touch的设备，iOS 9 新特性，默认：NO） @property (nonatomic) BOOL allowsLinkPreview NS_AVAILABLE_IOS(9_0); // default is NO

UIWebView的方法

- (void)loadRequest:(NSURLRequest *)request; //设置加载URL请求 - (void)loaDHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL; //如果网页是国际通用的UTF-8编码的，也可以用这个方法加载数据。 - (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL; //以二进制的方式加载数据 - (void)reload; //刷新WebView页面 - (void)stopLoading; //停止加载WebView页面 - (void)goBack; //返回上一级 - (void)goForward; //跳转下一级 - (nullable NSString *)stringByEvaluatingjavaScriptFromString:(NSString *)script; //OC与JS交互

UIWebView的代理方法

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType; //webView即将加载的时候，通过返回值确定是否加载，是枚举值 typedef NS_ENUM(NSInteger, UIWebViewNavigationType) { UIWebViewNavigationTypeLinkClicked, //点击了一个链接 UIWebViewNavigationTypeFormSubmitted, //提交了一个表单 UIWebViewNavigationTypeBackForward, //点击前进或者返回 UIWebViewNavigationTypeReload, //点击重新加载 UIWebViewNavigationTypeFormResubmitted, //重复提交表单 UIWebViewNavigationTypeOther //其他 } __TVOS_PROHIBITED;- (void)webViewDidStartLoad:(UIWebView *)webView; //webView开始加载的时候- (void)webViewDidFinishLoad:(UIWebView *)webView; //webView结束加载的时候- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error; //webView加载出错的时候

UIWebView中OC与JS交互

网页不仅是展示页面，也是一个交互页面，当用户想从网页调用系统方法，或者系统想更改网页的内容时，就涉及到了OC与JS之间的交互。OC与JS交互有多种方法。 OC 与 JS 交互方法一：

1.1 OC调用JS

OC调用JS指的是用户可以在手机上通过app对app里的网页进行增删改查，但是我们是不能直接修改网页的内容的，只能通过JS动态来修改。总体来说如下是使用方法：

// OC -> JS-(void)webViewDidFinishLoad:(UIWebView *)webView { [webView stringByEvaluatingJavascriptFromString :@“这里是JS语法”]; }

1.2 JS调用OC

JS调用OC一般是指，页面中某些功能需要调用系统的方法，html和JS无法直接和系统交互，只能通知web View，然后webView获取到消息，传递OC实现JS调用OC，比如点击网页上的电话号码实现打电话的需求。

//JS -> OC/*先在网页中设定好响应方法和协议，然后让网页响应这个协议并赋值给 window.location.href ，这样拦截所有请求的shouldStartLoadWithRequest代理方法就会接收到这个规定好的协议，按照这个协议转化成SEL方法，然后去执行就好了，就实现了JS 调用OC*/

OC 与 JS 交互方法二： iOS 7之后，苹果发布了JavaScriptCore.framework，它使得JS与OC的交互更加方便了。使用时首先导入JavaScriptCore库。

2.1 OC调用JS

举例如下：

-(void)webViewDidFinishLoad:(UIWebView *)webView { //网页加载完成调用此方法 //首先创建JSContext 对象（此处通过当前webView的键获取到jscontext） JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; NSString *alertJS=@"alert('test js OC')"; //准备执行的js代码，此处为弹出alert “test js OC” [context evaluateScript:alertJS];//通过oc方法调用js的alert }

2.2 JS调用OC

JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; //未登录或者token失效，请求登录，toLoginByAPP是与服务器约定一致的方法名 context[@"toLoginByAPP"] = ^() { NSLog(@"+++++++Begin toLoginByAPP+++++++"); NSArray *args = [JSContext currentArguments]; for (JSValue *jsVal1 in args) { NSLog(@"toLoginByAPP：%@", jsVal1); } JSValue *this = [JSContext currentThis]; NSLog(@"toLoginByAPP——this: %@",this); dispatch_async(dispatch_get_main_queue(), ^{ //登录的操作代码 }); NSLog(@"+++++++end toLoginByAPP+++++++"); };

OC 与 JS 交互方法三： 当然也有一些第三方实现交互的方式，这里就不再多说了。

上一篇：iOS UITableViewCell 分割线不到左部顶端的问题！

下一篇：iOS 10 跳转系统设置