隐藏 WKWebView 直到页面加载完成并且 JavaScript 有运行

Question

我的目标是隐藏我的应用程序的嵌入式 WKWebView，直到某些页面元素（例如 header 和页脚）从 DOM 中删除。

我当前的流程如下所示（请参阅下面的代码片段）：

将 WKWebView 设置为隐藏（实例化后并在 didStartProvisionalNavigation 挂钩中）。
运行 JavaScript 删除 didFinish navigation 挂钩中的页面元素，将 WKWebView 设置为在完成处理程序中可见。

override func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
    webView.isHidden = true
}

override func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    var scriptContent = ""
    do {
        scriptContent = try String(contentsOfFile: GlobalVariables.mainScriptURL!, encoding: String.Encoding.utf8)
    } catch {
        print("Error loading JavaScript file.")
    }
    webView.evaluateJavaScript(scriptContent, completionHandler: { result, error in
        webView.isHidden = false
    })
}

GlobalVariables.mainScriptURL内容：

$('header').hide();
$('footer').hide();

当上面的代码执行时，我仍然偶尔会在删除之前看到 header。我的 JavaScript 更新 DOM 和 WKWebView 重绘我没有考虑的内容之间是否有延迟？我如何确保在 JavaScript 运行之前我的用户永远看不到内容并从 DOM?

中完全删除这些元素

Answer 1

是的，不幸的是，我也注意到WKWebView的网页内容进程绘制不一定与您应用中的回调同步。在绘画发生之前，您可以短暂地看到不正确的内容。

我建议解决这个问题的方法是注入 JavaScript 监听 DOMContentLoaded 事件，并进行重新格式化工作，所有这些都在 Web 内容进程中。

如果您拥有正在加载的内容，很好，您只需将 <script> 添加到 <head>。

如果您没有源文档，您可以查看 WKUserScript 和 WKUserContentController，这应该允许您添加自己的 JavaScript 而无需修改页面源。

隐藏 WKWebView 直到页面加载完成并且 JavaScript 有运行

Hide WKWebView until page is loaded and JavaScript has run

javascript

ios

swift

wkwebview

隐藏 WKWebView 直到页面加载完成并且 JavaScript 有 运行

Hide WKWebView until page is loaded and JavaScript has run

javascript

ios

swift

wkwebview

隐藏 WKWebView 直到页面加载完成并且 JavaScript 有运行