webkit.messageHandlers 用于 React 注入 JavaScript 到 Swift

Question

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

This is not working, causes white screen - before showing actual content

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>

我的 React 组件

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

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

        return (
            content
        )
    }
}

export default Page;

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

Answer 1

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

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

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

它有点像 React 组件的 onload。

有关componentdidmount

的更多信息

webkit.messageHandlers 用于 React 注入 JavaScript 到 Swift

webkit.messageHandlers for React to inject JavaScript to Swift

javascript

reactjs

swift

wkwebview