首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在SwiftUI中观察WKWebView的加载进度?

在SwiftUI中观察WKWebView的加载进度可以通过使用WebKit的WKWebView的代理方法来实现。下面是一个完整的示例代码:

首先,创建一个名为WebViewObserver的ObservableObject类,用于观察WKWebView的加载进度:

代码语言:txt
复制
import SwiftUI
import WebKit

class WebViewObserver: NSObject, ObservableObject, WKNavigationDelegate {
    @Published var loadingProgress: Double = 0.0
    
    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        // 页面开始加载时调用
        loadingProgress = 0.0
    }
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 页面加载完成时调用
        loadingProgress = 1.0
    }
    
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        // 页面加载失败时调用
        loadingProgress = 0.0
    }
    
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        // 页面加载失败时调用(包括网络问题)
        loadingProgress = 0.0
    }
    
    func webView(_ webView: WKWebView, didReceiveServerRedirectForProvisionalNavigation navigation: WKNavigation!) {
        // 页面重定向时调用
        loadingProgress = 0.5
    }
    
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        // 页面开始加载时调用(包括重定向)
        loadingProgress = 0.1
    }
}

然后,在你的视图中使用WKWebView并观察加载进度:

代码语言:txt
复制
import SwiftUI
import WebKit

struct ContentView: View {
    @StateObject private var webViewObserver = WebViewObserver()
    
    var body: some View {
        VStack {
            Text("Loading Progress: \(webViewObserver.loadingProgress * 100, specifier: "%.0f")%")
            
            WebView()
                .navigationDelegate(webViewObserver)
        }
    }
}

struct WebView: UIViewRepresentable {
    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        return webView
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        let url = URL(string: "https://www.example.com")!
        let request = URLRequest(url: url)
        uiView.load(request)
    }
}

在上面的示例中,我们创建了一个名为WebViewObserver的ObservableObject类,它实现了WKNavigationDelegate协议,并使用@Published属性包装器来观察加载进度。在WebView中,我们使用了UIKit的UIViewRepresentable协议来创建并更新WKWebView,并将WebViewObserver设置为WKWebView的导航代理。

最后,在ContentView中,我们使用StateObject属性包装器来创建WebViewObserver的实例,并在视图中显示加载进度。

这样,当WKWebView加载页面时,WebViewObserver会根据加载进度的变化自动更新loadingProgress属性,从而实现在SwiftUI中观察WKWebView的加载进度。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

肘子 Swift 周报 #043| 记忆归档和唤醒

前一期内容|全部周报列表 原创 如何在 SwiftUI 中平铺图片[3] Fatbobman( 东坡肘子 )[4] “这题我会!”。我想,看到本文标题时,这恐怕是大多数人第一反应。...在本文中,我们将探讨两种不同图片平铺实现方式,并由此引申出一种在 SwiftUI 较少使用 Image 构建方法。...并针对开发者讲解了如何在自定义文本视图中集成 Writing Tools,如何控制 Writing Tools 行为,以及如何处理特定文本范围(代码块)等内容。...iOS WKWebView 页面与档案资源 Preload 预载 / Cache 缓存研究[9] ZhgChgLi[10] 在本文中,ZhgChgLi 探讨了 iOS 开发中使用 WKWebView页面预加载和缓存策略...文章详细介绍了 HTTP 缓存机制,并分析了多种可能加载和缓存方案,包括完善 HTTP 缓存、WKWebView加载、使用 URLProtocol 和 WKURLSchemeHandler 等。

8110
  • 何在keras添加自己优化器(adam等)

    2、找到keras在tensorflow下根目录 需要特别注意是找到keras在tensorflow下根目录而不是找到keras根目录。...一般来说,完成tensorflow以及keras配置后即可在tensorflow目录下python目录中找到keras目录,以GPU为例keras在tensorflow下根目录为C:\ProgramData...找到optimizers.pyadam等优化器类并在后面添加自己优化器类 以本文来说,我在第718行添加如下代码 @tf_export('keras.optimizers.adamsss') class...# 传入优化器名称: 默认参数将被采用 model.compile(loss=’mean_squared_error’, optimizer=’sgd’) 以上这篇如何在keras添加自己优化器...(adam等)就是小编分享给大家全部内容了,希望能给大家一个参考。

    45K30

    WKWebView使用与JS交互详细解读

    前言:     WKWebView 这是在iOS8.0之后增加一个比UIWebView更加完善和强大控件!...一:和UIWebView相比它不同处 1:和JS更好做交互,也支持H5一些新特性 2:加载进度条(下面会演示) 3:性能高,加载变得更快更可靠 二:从加载一张网页开始 1:使用这个WKWebView...这个是利用KVO模式写WKWebView有一个  estimatedProgress 属性,利用它来监听加载进度,下面的进度打印出来了,但具体进度条就没有写出来,你们可以自己写一个 UIProgressView...// estimatedProgress WKWebView 这个属性添加观察者 [webviwe addObserver:self forKeyPath:@"estimatedProgress"...,把加载进度打印出来,进度条可以自己加上去!

    3.1K70

    网易严选wkwebview测试之路

    app和web信息交换通道   允许JavaScriptNitro库加载并使用,UIWebView限制了   提供加载网页进度属性(estimatedProgress)   将UIWebViewDelegate...,作为一名客户端测试人员,我更加关注主要是wkwebview各大特性背后带来测试点,以下就从测试视角分析一下替换wkwebview之后,测试遇到比较多问题:   1、首先就是cookie问题...开发大大排查之后发现是wkwebview加载方法变了(wkwebview不支持用loadRequest方法加载本地静态HTML),要替换不同方法来加载,修复之后效果 3、wkwebview...从上图可以明显看出来,wk在内存消耗方面还是有显著提升,尤其是针对性能较差机器,ios9系统5s。   ...依据职责单一原则,拆分成了三个协议去实现WebView响应,解耦了JS交互和加载进度响应处理。但是他有一个最致命缺陷,就是WKWebView请求不能被NSURLProtocol截获。

    1.7K10

    使用WKWebView替换UIWebView

    代理方法 添加引用 import WebKit 代理 WKNavigationDelegate 页面加载状态回调 代理方法 func webView(_ webView: WKWebView, didStartProvisionalNavigation..., withError error: Error) { } 代理 WKUIDelegate 处理JS弹窗回调 代理方法 //消息弹窗 func webView(_ webView: WKWebView...completionHandler("哈哈"); } 交互 Swift调用JS方法 self.webview.evaluateJavaScript("loadData('123')") { (obj, error) in } JS方法...func backBarButtonClick(){ if(self.webview.canGoBack){ self.webview.goBack() } } 在之前页面加载完成回调重新设置导航栏...123')") { (response, error) in } } 替换页面引用JS/CSS为本地文件 暂时没有什么好解决方法 没有像android可以拦截替换方法

    1.9K10

    分享超详细 WKWebView 开发和使用经验

    WKWebView 几个不常用特性 WKWebview 加载过程性能指标图解 WKWebview 秒开实践及踩坑之路 今天分享这篇文章全面的介绍了 WKWebView,作者根据开发和使用经验从属性...通过 [WKWebView loadData:] 和 [WKWebView loadHTMLString:] 方法仅能加载当前HTML内容,无法加载资源文件,这种加载模式下,由于不需要访问其他路径下资源...WKWebView 属性 webView 属性 title: 网页标题,一般为 html 内容 URL: 网页URL地址,为最终加载地址 loading:...网页是否处于加载,YES 加载、 NO 加载完成 estimatedProgress: 网页加载进度 hasOnlySecureContent: 网页上所有资源是否已通过 https 加载 serverTrust...,一定要在合适时机将观察者模式移除,否则在 iOS10 以下设备会造成崩溃,原因是 WKWebView 在释放时候,扔被强持有观察者。

    4.8K30

    UI篇- UIWebView使用大全

    ,不做深究 WKWebView是iOS8推出,算是UIWebVeiw升级版。...继承自 UIView WKWebView特点: 性能高,稳定性好,占用内存比较小, 支持JS交互 支持HTML5 新特性 可以添加进度条(然并卵,不好用,还是习惯第三方)。...加载百度编译器编辑HTML文本 ******** 使用UIWebView 加载 HTML图文文本 ********* //self.newsM.content为网络返回原始图文信息。...OC给JS传参数,如何在OC获取到JS传递过来参数 如果要实现这样JS和OC数据交互,需要使用到一个第三方文件:WebViewJavascriptBridge 给web发消息 @property...如何消除Web Alert弹框中出现网址 ? 这里解决方法是通过使用 WKWebView 方法。

    2K10

    WKWebView详解

    您可以使用WKWebView类来在应用程序嵌入web内容,通过创建一个WKWebView对象,将其设置为视图,并发送一个请求来加载web内容。...: 方法来加载web内容; 使用 stopLoading 方法来停止加载; 使用 loading 属性来判断网页是否正在加载; 使用 WKUIDelegate 协议来跟踪网页内容加载过程; ---...当前浏览页面加载进度比例(估算值) @property(nonatomic, readonly) double estimatedProgress; 这个值根据预期接收字节总数(包括主文档和所有潜在子资源...)从0.0到1.0不等 在页面加载完成后,估算进度保持在1.0,直到新导航开始,这时估算进度重置为0.0 支持KVO 是否页面内所有资源都是通过安全链接加载 @property(nonatomic...新增变化,编译一个新规则列表,删除一个已经存在规则列表,都会持久化在相同路径 获取所有规则列表identifier - (void)getAvailableContentRuleListIdentifiers

    20.5K193

    Hybrid App 应用 开发 9 个必备知识点复习(WebView 调试 等)

    参考文章:《UIWebView与WKWebView》 UIWebView 是苹果继承于 UIView 封装一个加载 web 内容类,它可以加载任何远端web数据展示在你页面上,你可以像浏览器一样前进后退刷新等操作...不过苹果在 iOS8 以后推出了 WKWebView加载 Web,并应用于 iOS 和 OSX ,它取代了 UIWebView 和 WebView ,在两个平台上支持同一套 API。...库加载并使用, UIWebView 限制了; WKWebView 目前缺少关于页码相关 API; WKWebView 提供加载网页进度属性; WKWebView 使用 Safari 相同 JavaScript...引擎; WKWebView 增加加载进度属性: estimatedProgress ; WKWebView 不支持页面缓存,需要自己注入 cookie , 而 UIWebView 是自动注入 cookie...依据职责单一原则,拆分成了三个协议去实现 WebView 响应,解耦了 JS 交互和加载进度响应处理。

    3.1K00

    SwiftUI 创建一个环形 Slider

    环形Slider Slider 控件是一种允许用户从一系列值中选择一个值 UI 控件。在 SwiftUI ,它通常呈现为直线上拇指选择器。...有时将这种类型选择器呈现为一个圆圈,拇指绕着圆周移动可能会更好。本文介绍如何在 SwiftUI 定义一个环形 Slider。...有关默认 Slider 更多信息,可以参阅 如何在 SwiftUI 自定义 Slider 自定义外观内容。 初始化环形轮廓 从ZStack三个圆环开始。...一个灰色圆环代表滑块路径轮廓,一个淡红色圆弧代表沿着圆环进度,一个圆圈代表当前光标或拇指位置。将滑块范围设置为0.0到1.0,并硬编码一个直径和一个的当前位置进度 - 0.33。...应该只有一个属性来保存滑块进度。视图被提取到一个单独结构,该结构具有圆形滑块上进度一个绑定值。 滑块range可选参数也是可用

    3.6K30

    WKWebView 那些坑

    1、WKWebView 白屏问题 WKWebView 自诩拥有更快加载速度,更低内存占用,但实际上 WKWebView 是一个多进程组件,Network Loading 以及 UI Rendering...初次适配 WKWebView 时候,我们也惊讶于打开 WKWebView 后,App 进程内存消耗反而大幅下降,但是仔细观察会发现,Other Process 内存占用会增加。... header (WebKit 不会丢弃 header 字段); 通过-[WKWebView loadRequest:]加载 post 请求 request2; 通过 +[WKBrowsingContextController...加载 request3,最后通过 NSURLProtocolClient 将加载结果返回 WKWebView; 5、WKWebView 页面样式问题 在 WKWebView 适配过程,我们发现部分H5...虽然 WKWebView 坑比较多,但是相对 UIWebView 在内存消耗、稳定性方面还是有很大优势。尽管苹果对 WKWebView 开发进度过于缓慢,但相信 WKWebView 才是未来。

    4.5K130
    领券