iOS 开发之路(使用WKWebView加载Html5) 四

前端开发   发布日期:2025年05月29日   浏览次数:170

  基于Swift 3 、 Xcode 8 、 iOS 10 下的WKWebView的使用。

  首先是WKWebView的基本用法:

  1. var wk:WKWebView!
  2. var progBar:UIProgressView! //定义的进度条
  3. override func viewDidLoad() {
  4. super.viewDidLoad()
  5. self.wk = WKWebView(frame: self.view.frame)
  6. let theConfiguration = WKWebViewConfiguration()
  7. theConfiguration.userContentController = WKUserContentController() // 通过js与webview内容交互配置
  8. let frame = CGRect(x: ,y : , width: self.view.frame.width, height:self.view.frame.height) //定位wk位置
  9. wk = WKWebView(frame: frame, configuration: theConfiguration)
  10. wk.allowsLinkPreview = true
  11. self.wk.load(NSURLRequest(url:NSURL(string:"http://www.baidu.com/")! as URL) as URLRequest) //要在info.plist中添加对http的支持
  12. self.view.addSubview(self.wk)
  13. // add your self view here
  14. // add back <- icon to back to previous page
  15. }

  上面的其实很简单,很多教程里其实都有。下面讲一下如何实现进度条。这个也不难。

  1. //视图已经加载完后执行
  2. override func viewDidAppear(_ animated: Bool){
  3. super.viewDidAppear(animated)
  4. self.wk.uiDelegate = self //实现协议,进度条和获取网页标题需要用到
  5. self.wk.navigationDelegate = self //网页间前进后退要用到
  6. //生成进度条
  7. progBar = UIProgressView(frame: CGRect(x: , y: , width: self.view.frame.width, height: ))
  8. progBar.progress = 0.0
  9. progBar.tintColor = UIColor.blue
  10. self.view.addSubview(progBar)
  11. //注册进度条监听事件
  12. self.wk.addObserver(self, forKeyPath: "estimatedProgress", options: NSKeyValueObservingOptions.new, context: nil)
  13. //注册网页标题监听事件
  14. self.wk.addObserver(self, forKeyPath: "title", options: NSKeyValueObservingOptions.new, context: nil)
  15. }

  上面的UIDelegate要在类前添加协议:

  1. class LxxmForSwift: UIViewController, WKNavigationDelegate, WKUIDelegate UINavigationControllerDelegate {
  2. }

  关于WKUIDelegate、UINavigationDelegate大家可以去Apple开发中心查看文档,保证会加深印象。

  进度条、网页标题变动监听事件的具体实现:

  1. //这里添加了estimatedProgrees和title两个监听事件
  2. override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
  3. if keyPath == "estimatedProgress" {
  4. self.progBar.alpha = 1.0
  5. progBar.setProgress(Float(wk.estimatedProgress), animated: true)
  6. if(self.wk.estimatedProgress >= 1.0){
  7. UIView.animate(withDuration: 0.3, delay: 0.1, options: UIViewAnimationOptions.curveEaseInOut, animations: { () -> Void in
  8. self.progBar.alpha = 0.0
  9. }, completion: { (finished:Bool) -> Void in
  10. self.progBar.progress =
  11. })
  12. }
  13. } else if keyPath == "title" {
  14. self.titleForWeb.title = self.wk.title //这里titleForWeb是我自己定义的一个导航bar
  15. print(wk.title!)
  16. }
  17. }

  注意,添加完的监听事件需要有对应的注销事件:

  1. override func viewWillDisappear(_ animated: Bool) {
  2. wk.removeObserver(self, forKeyPath: "estimatedProgress")
  3. wk.removeObserver(self, forKeyPath: "title")
  4. }

  我们都知道,WKWebView比UIWebView占用更少内存,性能更好。不过UIWebView可以直接实现JS中alert实现,而前者对JS里的alert事件重新封装了,必须实现WKUIDelegate协议:


  1.   //把这两个方法加到代码里,配合之前的 self.wk.uiDelegate = self 即可。

  1.   //监听js调用提示框
  2. func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
  3. let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
  4. alert.addAction(UIAlertAction(title: "确定", style: .default, handler: { (action) in
  5. completionHandler()
  6. }))
  7. self.present(alert, animated: true, completion: nil)
  8. }
  9. // 监听通过JS调用q确认框
  10. func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
  11. let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
  12. alert.addAction(UIAlertAction(title: "确定", style: .default, handler: { (action) in
  13. completionHandler(true)
  14. }))
  15. alert.addAction(UIAlertAction(title: "取消", style: .default, handler: { (action) in
  16. completionHandler(false)
  17. }))
  18. self.present(alert, animated: true, completion: nil)
  19. }

  关于WKWebView中Html5图片上传,下一篇随笔我会说一下。

 

以上就是iOS 开发之路(使用WKWebView加载Html5) 四的详细内容,更多关于iOS 开发之路(使用WKWebView加载Html5) 四的资料请关注九品源码其它相关文章!