时间戳

首页 > 解决方案 > webkit.messageHandlers 用于 React 将 JavaScript 注入 Swift

javascript - webkit.messageHandlers 用于 React 将 JavaScript 注入 Swift

问题描述

我正在使用 WKWebView，我正在加载要显示的网页（React）。但是我的 didFinish 被触发得太早了。因此，当我的代表通知 didFinish 时，在加载实际数据之前，我只会看到几秒钟的白屏。

这不起作用，导致白屏 - 在显示实际内容之前

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {  
    activityIndicator?.stopAnimating()
}

相反，我读了这篇文章，告诉我应该可以通过让网页在加载时通​​知 Swift 代码来实现。

https://medium.com/capital-one-developers/javascript-manipulation-on-ios-using-webkit-2b1115e7e405

我确实在我的 Xcode 项目中实现了以下代码

override func viewDidLoad() {
    super.viewDidLoad()

    let userContentController = WKUserContentController()
    userContentController.add(self, name: "test")
}

extension DashboardViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "test", let messageBody = message.body as? String {
            print(messageBody)
        }
    }
}

但是，现在我们在这里。我不知道把它放在哪里，因为我的网络应用程序是用 React 编写的。

<script>   
    function printHelloWorld() {
        window.webkit.messageHandlers.test.postMessage("Did finish loading");   
    }   

    window.onload = printHelloWorld; 
</script>

我的反应组件

class Page extends React.Component<{ location, match }> {

    public render() {
        const content = (
            <div className="row">
              <p>Content</p>
            </div>
        );

        return (
            content
        )
    }
}

export default Page;

谁能告诉我，如何window.webkit.messageHandlers.test.postMessage在我的 React 组件中使用？

标签： javascriptswiftreactjswkwebview

解决方案

尝试在组件挂载时调用该函数：

class Page extends React.Component<{ location, match }> {

    componentDidMount() {
        window.webkit.messageHandlers.test.postMessage("Did finish loading");
    }
    render() {
      ...
    }
}

这有点像React组件的加载。

有关componentdidmount的更多信息

推荐阅读