Swift 使用WKWebview过程中遇到的问题汇总

最新推荐文章于 2025-06-06 14:55:51 发布

原创最新推荐文章于 2025-06-06 14:55:51 发布 · 5.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#swift #html

Swift 同时被 2 个专栏收录

5 篇文章

订阅专栏

iOS

1 篇文章

订阅专栏

本文汇总了使用Swift中WKWebView遇到的常见问题，包括显示本地HTML乱码、调用系统电话功能、按钮无响应、弹出框处理、以及处理HTML target="_blank"的情况，并给出了相应的解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

交互步骤

网上有许多，个人觉得这个博客写的比较好

显示本地HTML乱码

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312”/>

将gb2312改为utf-8

webview调用系统打电话的功能有问题

HTML的拨打电话的代码是

<a href="tel:13222223333”>打电话</a>

在WKNavigationDelegate中添加代码

    extension MainViewController:WKNavigationDelegate{    
        func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {                

            let url = navigationAction.request.url        
            let scheme = url?.scheme        
            guard let schemeStr = scheme else { return  }        
            if schemeStr == "tel" {           
                    //iOS10 改为此函数                     
                    UIApplication.shared.open(url!, options: [String : Any](), completionHandler: nil)        
               }        
             decisionHandler(.allow) 
          }
}

点击某些按钮没有反应

弹出框问题

需要查看按钮的功能如果是弹出提示框（alert）的点击事件，需要在WKUIDelegate中对代理方法进行实现


extension MainViewController:WKUIDelegate{

    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        let alertController:UIAlertController = UIAlertController(title: "提示", message: message, preferredStyle: .alert)
        alertController.addAction(UIAlertAction(title: "确认", style: .default, handler: { (action) in
            completionHandler()
        }))
        self.present(alertController, animated: true) {

        }
    }

    func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
        let alertController:UIAlertController = UIAlertController(title: "提示", message: message, preferredStyle: .alert)
        alertController.addAction(UIAlertAction(title: "确认", style: .default, handler: { (action) in
            completionHandler(true)
        }))
        alertController.addAction(UIAlertAction(title: "取消", style: .default, handler: { (action) in
            completionHandler(false)
        }))
        self.present(alertController, animated: true) {

        }
    }

    func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
        let alertController:UIAlertController = UIAlertController(title: prompt, message: "", preferredStyle: .alert)
        alertController.addTextField { (textField) in
            textField.text = defaultText
        }
        alertController.addAction(UIAlertAction(title: "完成", style: .default, handler: { (action) in
            completionHandler(alertController.textFields?.first?.text)
        }))
    }

}

调用系统打电话，发短信，邮件的问题

HTML代码如下

     <a href="tel:13233333333">13233577082</a></br>
     <a href="sms:10086?body=测试发送短信">给 10086 发送内容为"测试发送短信"的短信</a></br>
     <a href="mailto:xxx@xx.com">联系站长</a></br>

iOS端需要对此做相应的操作

        func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {

        //适配打电话 发短信 邮件
        let url = navigationAction.request.url
        let scheme = url?.scheme
        guard let schemeStr = scheme else { return  }
        switch schemeStr {
        case "tel":
            UIApplication.shared.open(url!, options: [String : Any](), completionHandler: nil)
            break
        case "sms":
            guard let description = url?.description else { return  }
            let tel:String = description.components(separatedBy: "?").first!
            let msg:String = (description.components(separatedBy: "body=").last?.removingPercentEncoding!)!
            print(msg)
            let sendMsg:String = "sms:\(tel)"
            //短信内容 自动填充暂时 还没发现
            UIApplication.shared.open(URL(string: sendMsg)!, options: [String:Any](), completionHandler: nil)
            break
        case "mailto":            
            guard let description = url?.description else { return  }
            // 邮件内容 自动填充暂时 还没发现
            print(description)
            UIApplication.shared.open(url!, options: [String : Any](), completionHandler: nil)
            break
        default: break

        }

        decisionHandler(.allow)
    }

判断发送短信跟邮件的时候，需要判断是否HTML端的代码是否有内容，然后在执行相应的字符串操作。自动填充内容笔者目前尚未发现。以后研究好了再来修改。

HTML端target为”_blank”的情形

HTML代码

    <a href="https://www.baidu.com" target="_blank">百度一下</a>

如果是在网页端的话，表现为重新打开一个网页，然后加载此URL，iOS端需要对此操作进行处理

目前发现两种办法
1. 获取到此网页的链接，直接让他强行加载
具体代码如下

    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {

        if navigationAction.targetFrame == nil {
            webView.load(navigationAction.request)
        }

        decisionHandler(.allow)
    }

或者在另一个代理中执行下面代码

    func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
        if navigationAction.targetFrame == nil {
            let url = navigationAction.request.url
            if url?.description.lowercased().range(of: "http://") != nil || url?.description.lowercased().range(of: "https://") != nil || url?.description.lowercased().range(of: "mailto:") != nil  {
                webView.load(URLRequest(url: url!))
            }
        }
        return nil
    }

2.修改HTML页面的内容，将所有的target为_blank的情况改为”“,具体代码如下,在同样的代理中添加

     if navigationAction.targetFrame == nil {
        webView.evaluateJavaScript("var a = document.getElementsByTagName('a');for(var i=0;i<a.length;i++){a[i].setAttribute('target','');}" , completionHandler: { (objc, error) in

         })
     }

个人感觉还是第一种方法好点。第二种方法遍历修改的话，感觉性能不太好。

另外，需要注意的是，一般弹出这种页面的情况，HTML页面上没有返回按钮，所以如果你想跳到前一个页面的话，只能用webview的返回方法

    func goback() {
        if webView.canGoBack {
            webView.goBack()
        }
    }

webview调起支付宝或者微信支付

需要在wkwebview的代理 -(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler 方法中获取到支付的URL 手动调起支付，代码如下：

-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
    NSString *pay = navigationAction.request.URL.absoluteString;
    if ([pay hasPrefix:@"weixin://"] || [testUrl hasPrefix:@"alipay://"]) {
        [self dealPayActionWithUrl:testUrl];
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}


//处理支付相关信息
-(void)dealPayActionWithUrl:(NSString *)url{
    NSURL *actionUrl = [NSURL URLWithString:url];
    [[UIApplication sharedApplication] openURL:actionUrl options:@{UIApplicationOpenURLOptionUniversalLinksOnly: @NO} completionHandler:^(BOOL success) {

    }];
}