MarshallOfSound / react-electron-web-view

A simple wrapper to make Electrons WebView compatible with React
MIT License
64 stars 30 forks source link

WebView is not ready yet... #14

Open MCTaylor17 opened 6 years ago

MCTaylor17 commented 6 years ago

I am using the following code:

componentDidMount() {
    try {
        this.webView.current.executeJavaScript("$('body, window').scrollTop(100)")
    } catch (err) {
        console.log("[DidMount]", err.message);
    }
    setTimeout(() => {
        this.webView.current.executeJavaScript("$('body, window').scrollTop(100)")
    }, 1000);
}

This results in a message [DidMount] WebView is not ready yet, you can't call this method followed by a scroll after the timeout period.

I also tried onDomReady event handler which fires even earlier with the message [DomReady] Cannot read property 'executeJavaScript' of null.

What is the best method of invoking a method when the webview is ready?

angelmankel commented 2 years ago

Found a solution to this so I will post my findings for anyone who ends up here. I used useEffect to make this work. I am using functional components but should still work if you use the same concept. All this does is open the devtools but you can obviously add anything you want. in the body of the dom-ready event listener.

useEffect(() => { const webview = document.querySelector('webview') webview.addEventListener("dom-ready", function(){ webview.openDevTools() }) })