创建属于你自己的应用内置浏览器

在我们的项目中,很多情况下我们需要实现类似微信内置浏览器加载网页的形式,今天就让我们自己来动手实现吧!

新特性

在iOS8之后,苹果推出了新的网页浏览器控件WKWebView,相比于之前的UIWebView,其主要特点非常明显:

  • 提供了更好的性能、更高的稳定性
  • 支持了更多的HTML5特性
  • 高达60fps的滚动刷新率和丰富的内置手势
  • 占用内存可能只有UIWebView的1/3 - 1/4
  • 具有Safari相同的JavaScript引擎
  • 高达60fps的滚动刷新率和丰富的内置手势

框架解读

  • WKBackForwardList 此对象是浏览器之前浏览过的网页的列表,你可以通过WebView的前进或者后退访问其中记录的任何一个页面,注意这是个对象,并不是数组

  • WKBackForwardListItem 此对象被包含在上边的WKBackForwardList之中

  • WKFrameInfo 包含网页主要的结构信息

  • WKNavigationAction 这是WebKit框架中比较重要的一个文件,其中包含了网页的结构信息、网页交互时触发的导航类型以及网页的请求信息等

  • WKPreferences 在这里用户可以配置网页字体大小、是否允许JavaScript交互等

  • WKScriptMessage 交互中的重要文件 如果涉及到原生用JavaScript的交互,这个文件提供了在原生接收到交互响应之后所调用的接口名称以及接收到的信息数据

  • WKScriptMessageHandler 交互中的重要文件 里边只有一个方法,当原生用JavaScript进行交互时,会走这个方法

  • WKSecurityOrigin 主要包含网页的安全信息,例如请求的Host地址,端口号等

  • WKUserContentController 交互中的重要文件 包含同JavaScript交互时接口注册/删除的方法等

  • WKWebView 重要文件 包含WKWebView的初始化、操作方法以及一系列属性

  • WKWebViewConfiguration 重要文件 在WKWebView初始化时需要的一个对象,在这里我们可以提前对WKWebView的很多属性进行提前配置

  • WKNavigationDelegate 两个代理之一,重要文件 在WKWebView的整个声明周期中,比如当决定页面是否加载、页面即将加载、页面加载成功/失败时都有所触发的代理方法,在其对应的方法里边我们可以按照需求进行设置

  • WKUIDelegate 两个代理之二,重要文件 当WKWebView页面创建、遇到网页弹窗时都有对应的触发的方法

WKNavigationDelegate

/**
在即将加载网页时决定WKWebView是否进行加载/导航

@param webView 加载网页的WKWebView控件
@param navigationAction 包含网页的导航信息,可根据需求获取界面加载信息
@param decisionHandler 在决定导航之前,不管你是否允许网页加载,你都必须实现这个Block,否则程序会崩溃。如果你设置了`WKNavigationActionPolicyCancel`,那么网页将不会被加载,并且之后的一系列代理方法都不会走
*/
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
/**
 在收到响应后,决定是否跳转/加载

 @param webView 加载网页的WKWebView控件
 @param navigationResponse 接收到的服务器返回信息
 @param decisionHandler 在接收到服务器相应之后,不管你是否允许网页加载,你都必须实现这个Block,否则程序会崩溃。如果你设置了`WKNavigationActionPolicyCancel`,那么网页将不会被加载,并且之后的一系列代理方法都不会走
 */
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler
/**
 页面开始加载触发的方法

 @param webView 加载网页的WKWebView控件
 @param navigation 页面导航信息
 */
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation
/**
 接收到服务器跳转请求触发的方法

 @param webView 加载网页的WKWebView控件
 @param navigation 页面导航信息
 */
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation
/**
 页面开始加载时数据加载失败触发的方法

 @param webView 加载网页的WKWebView控件
 @param navigation 页面导航信息
 @param error 错误信息
 */
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error
/**
 当内容开始返回触发的方法

 @param webView 加载网页的WKWebView控件
 @param navigation 页面导航信息
 */
- (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation
/**
 页面加载完成触发的方法

 @param webView 加载网页的WKWebView控件
 @param navigation 页面导航信息
 */
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation
/**
 页面加载过程中数据加载失败触发的方法

 @param webView 加载网页的WKWebView控件
 @param navigation 页面导航信息
 @param error 错误信息
 */
- (void)webView:(WKWebView *)webView didFailNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error
/**
 这与用于授权验证的API,与AFN、UIWebView的授权验证API是一样的
 */
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential * _Nullable credential))completionHandler

WKUIDelegate

/**
 点击网页上某个标签时,是否创建新的WebView
 */
- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures
/**
 当网页有JavaScript弹窗时触发的方法

 @param webView 加载网页的WKWebView控件
 @param message 弹窗提示信息
 @param frame 页面结构信息
 @param completionHandler 你必须实现这个Block,否则可能报错
 */
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
/**
 当网页有JavaScript弹窗时触发的方法
 */
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler
/**
 当网页有JavaScript带输入框样式的弹窗时触发的方法
 */
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler

WKWebView与KVO

WKWebView有几个属性是可以通过KVO的方式进行监听的

/**
 网页标题
 */
@property (nullable, nonatomic, readonly, copy) NSString *title;

/**
 网页加载的URL
 */
@property (nullable, nonatomic, readonly, copy) NSURL *URL;

/**
 网页是否正在加载
 */
@property (nonatomic, readonly, getter=isLoading) BOOL loading;

/**
 页面加载进度
 */
@property (nonatomic, readonly) double estimatedProgress;

/**
 标识加载的链接是否安全
 */
@property (nonatomic, readonly) BOOL hasOnlySecureContent;

/**
 ?
 */
@property (nonatomic, readonly, nullable) SecTrustRef serverTrust

/**
  页面是否可回退
 */
@property (nonatomic, readonly) BOOL canGoBack;

/**
 页面是否可前进
 */
@property (nonatomic, readonly) BOOL canGoForward;

对于这几个属性,我们都可以通过- (void)addObserver:(NSObject *)observer forKeyPath:(NSString *)keyPath options:(NSKeyValueObservingOptions)options context:(nullable void *)context的方式进行监听,不过在界面销毁时不要忘记移除监听状态。

WKWebView与JavaScript交互

在之前我使用过WebViewJavaScriptBridge第三方库进行原生同JavaScript的交互,但是有个问题,如果使用这个第三方库的话,我们自己就拿不到WKUIDelegate了,除非再把它从中调出,所以笔者自己简单写了个用于WKWebView同JavaScript交互的文件,源代码在工程里边都有。

笔者在研究WKWebView同JavaScript交互的过程中,发现不少坑

  • 如果原生要发送数据到JavaScript端,可以调用- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler方法,其中javaScriptString是要传递的数据,这个是字符串类型的,如果你要发送的是NSDictionary/NSArray等类型,必须首先转换为NSString类型
  • JavaScript端的写法window.webkit.messageHandlers.YourAPI.postMessage("这里边是JS传递过来的数据");,其中YourAPI是你注册的接口名字,两边必须一致,小括号里边的东西是JS传递过来的数据,里边必须是 NSString 类型的,而且参数只能有一个

第三方库

这个库是我根据项目需要以及在学习WebKit框架时写的,如果有同样需求的朋友应该会用到,当然这个库并不完善,日后我会不断修改以求做到最好,欢迎Star/issue

预览图-`Push Style`
预览图-`Push Style`

预览图-`Presended Style`
预览图-`Presended Style`

License

WebViewBrowser is released under the MIT license. See LICENSE for details.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容