WebBrowserComponent pageFinishedLoading() Bug or misunderstanding

General JUCE discussion
1

Hey all,

I’m trying to wrap my head around the WebBrowserComponent and have a question regarding the “pageFinishedLoading” function.

I have this code:

void MyBrowser::pageFinishedLoading(const juce::String &url)
{
    DBG("page loaded"); // -> output in JUCE
    
    emitEventIfBrowserIsVisible("test", juce::var(20.0)); // -> NO output in JS
    
    juce::Timer::callAfterDelay(100, [this] {
        emitEventIfBrowserIsVisible("test", juce::var(42.0)); // -> output in JS
    });
}

I would assume that I can emit events when the “page finished loading”, but it seems that it is not quite ready yet.
Is this a bug or am I missing something? If so what is the right way to determine that the browser is loaded and ready?

thanks in advance

2

I’m hitting this too and wondering if there’s a solution, seems pageFinishedLoading runs prior to the javascript context loading – is this something we need to manually handle / setup ourselves?

3

At the point pageFinishedLoading() is called and the browser isVisible() we only know two things.

The main resource specified in the current navigation e.g. index.html has been downloaded, and our native integration code has been injected. The isVisible() condition was added for ensuring the latter.

This means that at this point the JUCE native integration code is alive, so this will receive the event.

But at this point the layout of index.html hasn’t been calculated yet (so if you try to query visible sizes, those won’t be correct), additionally referenced scripts haven’t been downloaded yet, and even inline scripts possibly haven’t run yet.

Which means that even though the JUCE frontend event handler code runs, the user code had no chance yet to run window.__JUCE__.backend.addEventListener, and this can’t even happen until after pageFinishedLoading() returns.

We will amend the documentation to explain this about pageFinishedLoading().

The way to fix the above problem is to

  1. register your event listener using window.__JUCE__.backend.addEventListener("test"...
  2. use a NativeFunction or NativeEventListener in the backend and trigger it from Javascript after window.__JUCE__.backend.addEventListener was called.
  3. only now can you emit events that will be received by your event listeners

This is the only reliable way, because only the frontend code knows when addEventListener was called.

2 Likes