前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用WKWebView替换UIWebView

使用WKWebView替换UIWebView

作者头像
码客说
发布2019-10-22 14:47:07
1.8K0
发布2019-10-22 14:47:07
举报
文章被收录于专栏:码客码客

代理方法

添加引用

代码语言:javascript
复制
import WebKit

代理 WKNavigationDelegate 页面加载状态的回调

代理方法

代码语言:javascript
复制
func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {

}

func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {

}

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {

}

func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {

}

代理 WKUIDelegate 处理JS弹窗的回调

代理方法

代码语言:javascript
复制
//消息弹窗
func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
	self.showNoticeText(message, time: 1.2)
	completionHandler();
}
//确认弹窗
func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
	completionHandler(true);
}
//输入弹窗
func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
	completionHandler("哈哈");
}

交互

Swift调用JS方法

代码语言:javascript
复制
self.webview.evaluateJavaScript("loadData('123')") { (obj, error) in

}

JS中的方法

代码语言:javascript
复制
function loadData(questionid) {
    alert("传递的questionID为:"+questionid);
}

JS调用Swift方法

添加代理WKScriptMessageHandler

代理方法

代码语言:javascript
复制
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if(message.name == "getIOSMessage"){
        if let message_body = message.body as? [String:String]{
            if let name = message_body["name"]{
                self.showNoticeText("JS传过来的数据 name:\(name)", time: 1.2)
            }
        }
    }
}

WKWebView配置

代码语言:javascript
复制
let config = WKWebViewConfiguration.init()
config.userContentController = WKUserContentController.init();
config.userContentController.add(self, name: "getIOSMessage");
self.webview = WKWebView.init(frame: CGRect.zero, configuration: config);
self.webview.allowsBackForwardNavigationGestures = true;
self.webview.navigationDelegate = self;
self.webview.uiDelegate = self;

JS调用

代码语言:javascript
复制
$("#question_group").click(function () {
    try{
        window.webkit.messageHandlers.getIOSMessage.postMessage({'name': '小明'});
    }catch(e){

    }
});

进度条

添加进度条

代码语言:javascript
复制
self.progressView = UIProgressView.init()
self.progressView.progressTintColor = ZJColor.orangeColor;
self.view.addSubview(self.progressView);
self.progressView.snp.makeConstraints { (maker) in
    maker.height.equalTo(2)
    maker.left.top.right.equalToSuperview()
}

监听进度变化

代码语言:javascript
复制
override func viewDidAppear(_ animated: Bool) {
    self.webview.addObserver(self, forKeyPath: "estimatedProgress", options: .new, context: nil)
}

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

override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
    if(keyPath == "estimatedProgress"){
        if (self.webview.estimatedProgress == 1){
            self.progressView.isHidden = true
        }else{
            self.progressView.isHidden = false
            self.progressView.progress = Float(self.webview.estimatedProgress)
        }
    }
}

后退键

代码语言:javascript
复制
func setNavi()  {
    let closeBarButtonItem = UIBarButtonItem(image: UIImage(named:"tk_close"), style: UIBarButtonItemStyle.plain, target: self, action: #selector(leftBarButtonClick));
    let backBarButtonItem = UIBarButtonItem(image: UIImage(named:"tk_back"), style: UIBarButtonItemStyle.plain, target: self, action: #selector(backBarButtonClick));
    if(self.webview != nil && self.webview.canGoBack){
        self.navigationItem.leftBarButtonItems = [closeBarButtonItem,backBarButtonItem];
    }else{
        self.navigationItem.leftBarButtonItems = [closeBarButtonItem];
    }
}

@objc func backBarButtonClick(){
    if(self.webview.canGoBack){
        self.webview.goBack()
    }
}

在之前的页面加载完成回调中重新设置导航栏

代码语言:javascript
复制
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    self.setNavi()
    //这一行是为了 页面加载完成后 调用js方法 加载数据
    self.webview.evaluateJavaScript("loadData('123')") { (response, error) in

    }
}

替换页面中的引用的JS/CSS为本地文件

暂时没有什么好的解决方法 没有像android可以拦截替换的方法

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-02-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 代理方法
  • 交互
    • Swift调用JS方法
      • JS调用Swift方法
      • 进度条
      • 后退键
      • 替换页面中的引用的JS/CSS为本地文件
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档