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

   2023-02-08 学习力0
核心提示:  基于Swift 3 、 Xcode 8 、 iOS 10 下的WKWebView的使用。  首先是WKWebView的基本用法:var wk:WKWebView! var progBar:UIProgressView!//定义的进度条override func viewDidLoad() {super.viewDidLoad()self.wk = WKWebView(frame: self.view.frame)l

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

  首先是WKWebView的基本用法:

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

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

    //视图已经加载完后执行
    override func viewDidAppear(_ animated: Bool){
        super.viewDidAppear(animated)

        self.wk.uiDelegate = self //实现协议,进度条和获取网页标题需要用到
        self.wk.navigationDelegate = self //网页间前进后退要用到
     
        //生成进度条
        progBar = UIProgressView(frame: CGRect(x: 0, y: 0, width: self.view.frame.width, height: 30))
        progBar.progress = 0.0
        progBar.tintColor = UIColor.blue
        self.view.addSubview(progBar)
        //注册进度条监听事件
        self.wk.addObserver(self, forKeyPath: "estimatedProgress", options: NSKeyValueObservingOptions.new, context: nil)
        //注册网页标题监听事件
        self.wk.addObserver(self, forKeyPath: "title", options: NSKeyValueObservingOptions.new, context: nil)
  
    }

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

class LxxmForSwift: UIViewController, WKNavigationDelegate, WKUIDelegate, UINavigationControllerDelegate {
}

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

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

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

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

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

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

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

  //监听js调用提示框 func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) { let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert) alert.addAction(UIAlertAction(title: "确定", style: .default, handler: { (action) in completionHandler() })) self.present(alert, animated: true, completion: nil) } // 监听通过JS调用q确认框 func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) { let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert) alert.addAction(UIAlertAction(title: "确定", style: .default, handler: { (action) in completionHandler(true) })) alert.addAction(UIAlertAction(title: "取消", style: .default, handler: { (action) in completionHandler(false) })) self.present(alert, animated: true, completion: nil) }

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

 

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • HTML中将背景颜色渐变 html设置背景颜色渐变
    通过使用 css3 渐变可以让背景两个或多个指定的颜色之间显示平稳的过渡,由于用到css3所以需要考虑下浏览器兼容问题,例如:从左到右的线性渐变,且带有透明度的样式:#grad {background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*
    03-08
  • html5 Canvas 如何自适应屏幕大小
    但是这样创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。而这一点往往又非常重要, 因为我们会经常改变浏览器窗口大小,不会一直保持某个固定的大小。 html代码 canvas width="300" height="300" id="myCanvas"/canvas设置样式 * {
    03-08
  • Vue中出现Do not use built-in or reserved HTML elements as component id:footer等等vue warn问题
    Vue中出现Do not use built-in or reserved HTM
    错误示图:原因:是因为在本地项目对应文件的script中,属性name出现了错误的命名方式,导致浏览器控制台报错!  诸如: name: header 、  、 name: menu , 等等都属于错误的命名方式等 错误代码命名如下:解决办法:办法1: 如果我们采用正确命名
    03-08
  • HTML在网页中插入音频视频简单的滚动效果
    HTML在网页中插入音频视频简单的滚动效果
    每次上网,打开网页后大家都会看到在网页的标签栏会有个属于他们官网的logo,现在学了HTML了,怎么不会制作这个小logo呢,其实很简单,也不需要死记硬背,每当这行代码出现的时候能知道这是什么意思就ok1 link rel="shortcuticon" type="image/x-icon" href="
    03-08
  • HTML的video标签,不能下载视频代码
    !-- 在线视频不能下载代码 --!DOCTYPE html html headscript src="../Demo/demo/book/JQuery/jQuery v2.2.0.js"/script/headbody div style="text-align:center;"video src="../images/PreviewVideo.mp4" width="820"controls="controls&
    03-08
  • ThinkPHP报错 The requested URL /admin/index/login.html was not found on this server.
    ThinkPHP报错 The requested URL /admin/index/
           解决方案在入口文件夹public下查看.htaccess是否存在。不存在则新建,存在的话,那内容替换为下面这串代码 就可以解决Not Fund#IfModule mod_rewrite.c#Options +FollowSymlinks -Multiviews#RewriteEngine On##RewriteCond %{REQUEST_FILENAME
    03-08
  • HTML特殊字符、列表、表格总结 html特殊符号对
            HTML实体字符  在HTML中一些特殊的字符需要用特殊的方式才能显示出来,比如小于号、版权等,  在课堂上老师教了我们一个有点意思的:空格,在教材上字符实体是“nbsp”通过老师  的演示我们发现不同的浏览器他所显示的效果不同,有的比
    03-08
  • 【JavaScript】使用document.write输出覆盖HTML
    您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。分析HTML输出流是指当前数据形式是HTML格式的数据,这部分数据正在被导出、传输或显示,所以称为“流”。通俗的来说就是HTML文档的加载过程,如果遇到document.writ
    03-08
  • ASP.Net MVC 控制@Html.DisplayFor日期显示格式
    在做一個舊表的查詢頁時,遇到一個問題:字段在db里存儲的是DATETIME,但保存的值只有日期,沒有時間數據,比如2018/2/26 0:00:00,顯示出來比較難看,當然也可以做一個ViewModel,在字段上添加Attribute定義來更改名稱和顯示名稱,如下:[Display(Name = "建
    03-08
  • html 基础代码
    title淄博汉企/title/headbody bgcolor="#00CC66" topmargin="200" leftmargin="200" bottommargin="200"a name="top"/a今天br /天气nbsp;nbsp;nbsp;nbsp;nbsp;不错br /font color="#CC0000"格式控制标签br /b 文字加粗方式1\bbr /str
    03-08
点击排行