Swift5.0 WKWebView中的JS交互

好的团队离不开大家的默契合作,在开发中经常遇到H5和移动端合作的业务,在开发中JS交互是非常常见的,小萌现在的主打语言是Swift,所以封装一下Swift版的JS交互

完整代码

在此之前加入协议WKNavigationDelegate,WKUIDelegate ,WKScriptMessageHandler

    lazy var userWebview:WKWebView = {
        //配置环境
        //初始化WKWebViewConfiguration
        let webConfiguration = WKWebViewConfiguration()
        let userContentController = WKUserContentController()
        webConfiguration.userContentController = userContentController


   //JS调用Swift
   // userContentController.add(self, name: "")


        let userWebview = WKWebView(frame: CGRect.zero, configuration: webConfiguration)
        userWebview.frame = CGRect(x:SCREEN_WIDTH - 115, y:53, width:70, height:30)
        userWebview.uiDelegate = self
        userWebview.navigationDelegate = self
        userWebview.scrollView.isScrollEnabled = false
        userWebview.scrollView.showsVerticalScrollIndicator = false
        userWebview.scrollView.showsHorizontalScrollIndicator = false
        let myURL = URL(string: PublicGetVerify)
        let myRequest = URLRequest(url: myURL!)
        userWebview.load(myRequest)

        return userWebview
    }()
    
//MARK: - WKScriptMessageHandler
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        
    }
    
    
    //MARK: - WKNavigationDelegate
    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) {
        // 页面加载完成之后调用
    }
    
    
    func webView(_ webView: WKWebView, didReceiveServerRedirectForProvisionalNavigation navigation: WKNavigation!) {
         接收到服务器跳转请求之后调用
    }

    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 改为此函数
            if #available(iOS 10.0, *) {
                UIApplication.shared.open(url!, options: [String : Any](), completionHandler: nil)
            } else {
                // Fallback on earlier versions
            }
        }
        
        decisionHandler(.allow)
     // 在发送请求之前,决定是否跳转
    }

    func webView(_ webView: WKWebView, decidePolicyFor navigationResponse: WKNavigationResponse, decisionHandler: @escaping (WKNavigationResponsePolicy) -> Void) {
        
        
        decisionHandler(.allow)
        
        // 在收到响应后,决定是否跳转
    }
    
   
    //MARK: - WKUIDelegate
    // 创建一个新的WebView
    func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
        
        return WKWebView()
    }
    
    // 输入框
    // JS端调用prompt函数时,会触发此方法
    // 要求输入一段文本
    // 在原生输入得到文本内容后,通过completionHandler回调给JS
    func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void){
        
    
        
    }
    
    
    // 确认框
    // JS端调用confirm函数时,会触发此方法
    // 通过message可以拿到JS端所传的数据
    // 在iOS端显示原生alert得到YES/NO后
    // 通过completionHandler回调给JS端
    func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void){

        
    }
    
    
    // 警告框
    // 在JS端调用alert函数时,会触发此代理方法。
    // JS端调用alert时所传的数据可以通过message拿到
    // 在原生得到结果后,需要回调JS,是通过completionHandler回调
    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void){
        
  
    }
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Swift 使用 WKWebView 加载绝对路径的 CSS 样式表,可以通过以下步骤来实现: 1. 将 CSS 文件添加到您的项目。可以拖放 CSS 文件到项目导航器的适当位置,确保将其添加到正确的目标。 2. 在您的 ViewController 类,导入 WebKit 框架: ```swift import WebKit ``` 3. 创建一个 WKWebView 的实例,并将其添加到您的视图层次结构: ```swift let webView = WKWebView(frame: view.bounds) view.addSubview(webView) ``` 4. 使用 `fileURLWithPath` 方法获取 CSS 文件的绝对路径,并通过 `loadFileURL` 方法加载本地 HTML 文件: ```swift if let cssURL = Bundle.main.url(forResource: "style", withExtension: "css") { let htmlPath = Bundle.main.path(forResource: "index", ofType: "html") // index.html 是您的 HTML 文件名 let htmlURL = URL(fileURLWithPath: htmlPath!) webView.loadFileURL(htmlURL, allowingReadAccessTo: cssURL) } ``` 这里假设您的 CSS 文件名为 "style.css",HTML 文件名为 "index.html"。确保将这些文件添加到您的项目,并指定正确的文件名和扩展名。 5. 在 HTML 文件,使用 `<link>` 标签将 CSS 样式表链接到页面上。在 `<head>` 标签内,添加以下行: ```html <link rel="stylesheet" type="text/css" href="style.css"> ``` 确保将 "style.css" 替换为您的 CSS 文件名。 这样,当 WKWebView 加载 HTML 文件时,它会自动加载链接的 CSS 样式表并应用于页面。 请注意,确保 CSS 文件和 HTML 文件位于正确的位置,并在项目目标的 Build Phases 将它们添加到 "Copy Bundle Resources" 列表,以便在构建时正确复制到应用程序包

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值