隐藏 WKWebView 直到页面被加载并且 JavaScript 已经运行

Question

My goal is to hide my application's embedded WKWebView until certain page elements (eg header and footer) are removed from the DOM.我的目标是隐藏我的应用程序的嵌入式 WKWebView，直到从 DOM 中删除某些页面元素（例如 header 和页脚）。

My current process looks like this (see code snippets below):我当前的流程如下所示（请参阅下面的代码片段）：

Set WKWebView to hidden (after instantiation and in the didStartProvisionalNavigation hook).将 WKWebView 设置为隐藏（在实例化之后和didStartProvisionalNavigation挂钩中）。
Run JavaScript to remove page elements in the didFinish navigation hook, setting the WKWebView to visible in the completion handler.运行 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 contents: GlobalVariables.mainScriptURL内容：

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

When the above code executes, I still occasionally see the header prior to its removal.当上面的代码执行时，我仍然偶尔会在删除之前看到 header。 Is there a delay between my JavaScript updating the DOM and the WKWebView redrawing its content that I'm failing to consider?我的 JavaScript 更新 DOM 和 WKWebView 重绘我没有考虑的内容之间是否有延迟？ How can I ensure that the content is never visible to my users prior to that JavaScript running and completely removing those elements from the DOM?在 JavaScript 运行并从 DOM 中完全删除这些元素之前，我如何确保内容对我的用户永远不可见？

Answer 1

Yeah, unfortunately, I have also noticed that WKWebView's web content process painting is not necessarily synchronized with the callbacks in your app.是的，不幸的是，我也注意到WKWebView的web内容流程绘制不一定与您应用中的回调同步。 You can get a brief flash of incorrect content before the painting occurs.在绘画发生之前，您可以获得错误内容的简短 flash。

The way I'd suggest fixing this is by injecting JavaScript that listens to the DOMContentLoaded event, and does its reformatting work, all within the web content process.我建议解决这个问题的方法是注入 JavaScript 来监听 DOMContentLoaded 事件，并进行重新格式化工作，所有这些都在 web 内容进程中。

If you own the content being loaded, great, you can just add a <script> to the <head> .如果您拥有正在加载的内容，很好，您只需将<script>添加到<head>即可。

If you don't own the source document, you can look into WKUserScript and WKUserContentController, that should allow you to add your own JavaScript without modifying the page source.如果您没有源文档，可以查看 WKUserScript 和 WKUserContentController，这应该允许您添加自己的 JavaScript 而无需修改页面源。

隐藏 WKWebView 直到页面被加载并且 JavaScript 已经运行

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-08-18 21:57:56

隐藏 WKWebView 直到页面被加载并且 JavaScript 已经运行

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-08-18 21:57:56

解决方案1
1 已采纳 2020-08-18 21:57:56