文章目录

准备
- 添加权限
- import
- 设置根视图
一些方法
设置JS的三个弹出框为iOS原生alert
- alert() 警告框
- confirm() 确认框
- prompt() 输入框
添加小菊花
- 设置样式
- 小菊花的一生
六个生命周期函数
- 遵循协议
- 请求之前
- 开始加载
- 接收到网站的响应之后
- 开始从服务器中接收数据
- 结束接收
- 接收失败
注入HTML
- 一小段
- .html文件
注入JavaScript
加载进度条(KVO)
- 添加观察者
- 观察变化
- 销毁观察者
和Web前段进行数据交互
- Web的和iOS交互的函数
- 设置self来处理数据
- 遵循协议完成取数据的方法
截取WebView
处理Cookie

准备

添加权限

使得除了https的网站也能在iOS中运行起来

import

import WebKit

设置根视图

var webView: WKWebView!override func loadView() {let config = WKWebViewConfiguration()webView = WKWebView(frame: .zero, configuration: config)webView.allowsBackForwardNavigationGestures = truewebView.uiDelegate = selfwebView.navigationDelegate = self //就是LoadDelegateview = webView
}override func viewDidLoad() {super.viewDidLoad()webView.load("https://www.google.com")
}

在另个WKWebView.swift里面

import UIKit
import WebKitextension WKWebView {func load(_ string: String) {if let url = URL(string: string) {load(URLRequest(url: url))}}
}

一些方法

var webView: WKWebView!
//用于判断
webView.isLoading
webView.canGoBack
webView.canGoForward//方法
webView.reload()
webView.reloadFromOrigin()
webView.stopLoading()
webView.goBack()
webView.goForward()

设置JS的三个弹出框为iOS原生alert

首先遵循协议

extension ViewController: WKUIDelegate {}

alert() 警告框

extension ViewController: WKUIDelegate {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: { (_) incompletionHandler()}))present(alert, animated: true, completion: nil)}
}

confirm() 确认框

extension ViewController: WKUIDelegate {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: .cancel, handler: { (_) incompletionHandler(false)}))alert.addAction(UIAlertAction(title: "确定", style: .default, handler: { (_) incompletionHandler(true)}))present(alert, animated: true, completion: nil)}
}

prompt() 输入框

extension ViewController: WKUIDelegate {func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {let alert = UIAlertController(title: nil, message: prompt, preferredStyle: .alert)alert.addTextField { (textField) intextField.placeholder = defaultText}alert.addAction(UIAlertAction(title: "确定", style: .default, handler: { (_) incompletionHandler(alert.textFields?.last?.text)}))present(alert, animated: true, completion: nil)}
}

添加小菊花

设置样式

var spinner: UIActivityIndicatorView!func setSpinner() {spinner = UIActivityIndicatorView(style: .whiteLarge)spinner.backgroundColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.8012895976)spinner.layer.cornerRadius = 10spinner.translatesAutoresizingMaskIntoConstraints = falseview.addSubview(spinner)spinner.centerXAnchor.constraint(equalTo: webView.centerXAnchor).isActive = truespinner.centerYAnchor.constraint(equalTo: webView.centerYAnchor).isActive = truespinner.widthAnchor.constraint(equalToConstant: 80).isActive = truespinner.heightAnchor.constraint(equalToConstant: 80).isActive = true
}

小菊花的一生

spinner.startAnimating()
spinner.stopAnimating()
spinner.removeFromSuperview()

六个生命周期函数

遵循协议

extension ViewController: WKNavigationDelegate {}

请求之前

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {print(#function)
//        if let url = navigationAction.request.url {//            if url.host != "www.google.com" {//                UIApplication.shared.open(url)
//                decisionHandler(.cancel)
//                return
//            }
//        }decisionHandler(.allow)
}

开始加载

func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {print(#function)spinner.startAnimating()
}

接收到网站的响应之后

一般都会跳转到一个页面显示错误的编号例如404，403

func webView(_ webView: WKWebView, decidePolicyFor navigationResponse: WKNavigationResponse, decisionHandler: @escaping (WKNavigationResponsePolicy) -> Void) {print(#function)if let httpResponse = navigationResponse.response as? HTTPURLResponse {if httpResponse.statusCode == 200 {decisionHandler(.allow)}else{let sb = UIStoryboard(name: "Main", bundle: Bundle.main)let vc = sb.instantiateViewController(identifier: "error") as! ErrorVCvc.errorStatus = httpResponse.statusCodevc.modalPresentationStyle = .fullScreenpresent(vc, animated: true, completion: nil)decisionHandler(.cancel)}}
}

开始从服务器中接收数据

func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {print(#function)
}

结束接收

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {print(#function)spinner.stopAnimating()spinner.removeFromSuperview()
}

接收失败

func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {print(#function)spinner.stopAnimating()spinner.removeFromSuperview()
}

注入HTML

一小段

baseURL用于说明加载资源文件的地址

func handleHTMLString() {let html = """<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Text</title></head><body><div style="text-align: center;font-size: 80px;margin-top: 350px">Text</div></body></html>"""webView.loadHTMLString(html, baseURL: Bundle.main.resourceURL)
}

.html文件

用deletingPathExtension是因为一般HTML的资源文件是和html文件放在同一个包里面

func handleHTMLFile() {let url = Bundle.main.url(forResource: "HomePage", withExtension: "html")!webView.loadFileURL(url, allowingReadAccessTo: url.deletingPathExtension())
}

注入JavaScript

以document.body.offsetHeight为例子

func handleJS() {webView.evaluateJavaScript("document.body.offsetHeight") { (res, error) inprint(res)}
}

一般放在结束接收的函数里面

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {print(#function)spinner.stopAnimating()spinner.removeFromSuperview()handleJS()
}

加载进度条(KVO)

添加观察者

webView.addObserver(self, forKeyPath: #keyPath(WKWebView.estimatedProgress), options: .new, context: nil)

观察变化

//观察者观察的值一旦变化就会自动调用这个函数
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {if keyPath == #keyPath(WKWebView.estimatedProgress) {print(webView.estimatedProgress)//可在这里添加关于progressView的代码progerssView.progress = webView.estimatedProgress}
}

销毁观察者

因为观察者的存在非常消耗内存
一般都在class ViewController里面的deinit销毁

deinit {webView.removeObserver(self, forKeyPath: #keyPath(WKWebView.estimatedProgress))
}

和Web前段进行数据交互

Web的和iOS交互的函数

假设要传一个user
就必须得用window.webkit.messageHandlers.name.postMessage(messageBody)

<script type="text/javascript">function sendMessageToIOS() {var user = {name: "zjh"age: 20};window.webkit.messageHandlers.name.postMessage(user)}
</script>

设置self来处理数据

let config = WKWebViewConfiguration()
//name是在js代码中识别的
config.userContentController.add(self, name: "key")

遵循协议完成取数据的方法

extension ViewController: WKScriptMessageHandler{func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {if message.name == "key" {print(message.body)}}
}

截取WebView

config.rect用来设置截取的大小然后放到with变量后面，若截取的是整个webView则用nil

func takeSnapShot() {let config = WKSnapshotConfiguration()config.rect = CGRect(x: 0, y: 0, width: 200, height: 200)webView.takeSnapshot(with: config) { (image, error) inguard let image = image else {return}print(image.size)}
}

处理Cookie

读取和删除cookie

func handleCookie() {webView.configuration.websiteDataStore.httpCookieStore.getAllCookies({ cookies infor cookie in cookies {if cookie.name == "auth" {self.webView.configuration.websiteDataStore.httpCookieStore.delete(cookie)}else{print(cookie.value)}}})
}

Swift WKWebView相关推荐

swift WkWebView的返回，goback，跳过同级
swift WkWebView的返回,goback,跳过同级在使用wkwebview的时候,需要增加顶部的返回图标,可以直接调用gaback函数,但是在web页中,同一页的不同tab也会被压入返回的 ...
Swift WKWebView读取本地html
哈喽,大家好最近闲着无聊,学下Swift 以后会把一些知识点记录在这,以备用废话不多说,直接上代码 /** WKWebView 的简单使用,读取本地html文件 */ let webVi ...
Swift WKWebView详细解读
github地址:https://github.com/LINGLemon/LXFSwiftApp 1.基本方法和属性首先介绍下WKWebView的一些常用的方法和属性: 实际使用中,一般还要搭配使 ...
[Swift]WKWebView拉起支付宝和微信APP支付
先在项目中导入AlipaySDK和WechatOpenSDK. 再对info.plist中LSApplicationQueriesSchemes添加alipay.weixin. 最后到代理方法中完成拦 ...
[Swift]WKWebView与JS交互
本文通过一个实例介绍了几种App与Web交互的情形: 1.同步返回参数给Web. 比如App提供方法返回token, Web中在需要的时候即时拿取. 2.Web异步调用App提供的方法. 使用这种方式 ...
系列文章深度解读|SwiftUI 背后那些事儿
原创系列文章深度解读|SwiftUI 背后那些事儿 2019-06-24 17:30:00 淘宝技术阅读数 216 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附 ...
iOS三维菜单、调试工具、封装通讯录、网络框架、多种控件和动画等源码
iOS精选源码一个调用系统通讯录和获取通讯录所有联系人的封装 ios scrollview嵌套tableview同向滑动(初级.进阶), 支持OC / Swift WKWebView常用设置及进度条 ...
[swift]-使用JavaScript解决WKWebView无法发送POST参数问题
2019独角兽企业重金招聘Python工程师标准>>> 基本实现思路: 将一个包含JavaScript的POST请求的HTML代码放到工程目录中加载这个包含JavaScript的P ...
swift中WKWebView和JS交互实现
在Swift中加载HTML网页有两个view,分别是WKWebView和UIWebView,这里我使用的是WKWebView 这里分享一下我的写法: 1.定义变量WKWebView: lazy var ...

Swift WKWebView