# WebBrowserComponent - thanks!

**URL:** <https://forum.juce.com/t/webbrowsercomponent-thanks/50859>\
**Category:** General JUCE discussion\
**Created:** [April 4, 2022, 8:36am UTC](https://forum.juce.com/t/webbrowsercomponent-thanks/50859 "2022-04-04T08:36:51Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![peteatjuce](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/peteatjuce/32/2347_2.png) [@peteatjuce](https://forum.juce.com/u/peteatjuce)\
**Post date:** [April 4, 2022, 8:36am UTC](https://forum.juce.com/t/webbrowsercomponent-thanks/50859/1 "2022-04-04T08:36:51Z")

</div>

Just felt that I should say “Thank you!” to the JUCE devs for the WebBrowserComponent, which has allowed us to make major improvements to Wotja in version 22.3.0 (out in 1-2 weeks).

I’m particularly happy that you went to the effort of implementing the code behind JUCE\_USE\_WIN\_WEBVIEW2, which makes a huge difference on Windows.

Thank you so much!

Pete - Intermorphic

---

<div class="post-metadata">

**Author:** ![peteatjuce](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/peteatjuce/32/2347_2.png) [@peteatjuce](https://forum.juce.com/u/peteatjuce)\
**Post date:** [April 8, 2022, 8:03am UTC](https://forum.juce.com/t/webbrowsercomponent-thanks/50859/2 "2022-04-08T08:03:04Z")

</div>

Hi folks!

Wotja 22.3.0 is now available for download for macOS and Windows - and will be there in a day or so for iOS and Android (where we’re just waiting for reviews to complete).

We’re really happy with the new, tightly integrated in-app help system. We hope you like it!

It just goes to show how far you can go with in-app help, even in the context of a plug-in.

Thanks in no small part to JUCE.

Best wishes,

Pete

---

<div class="post-metadata">

**Author:** ![peteatjuce](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/peteatjuce/32/2347_2.png) [@peteatjuce](https://forum.juce.com/u/peteatjuce)\
**Post date:** [September 19, 2022, 12:55pm UTC](https://forum.juce.com/t/webbrowsercomponent-thanks/50859/3 "2022-09-19T12:55:54Z")

</div>

Worth mentioning that anybody wanting a few more pointers on handling this, especially on Windows and Android, might want to see this thread:

(removed broken link)

Best wishes,

Pete

---

<div class="post-metadata">

**Author:** ![jrlanglois](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jrlanglois/32/21372_2.png) [@jrlanglois](https://forum.juce.com/u/jrlanglois)\
**Post date:** [September 19, 2022, 2:23pm UTC](https://forum.juce.com/t/webbrowsercomponent-thanks/50859/4 "2022-09-19T14:23:03Z")

</div>

Your link’s broken

---

<div class="post-metadata">

**Author:** ![peteatjuce](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/peteatjuce/32/2347_2.png) [@peteatjuce](https://forum.juce.com/u/peteatjuce)\
**Post date:** [September 19, 2022, 4:13pm UTC](https://forum.juce.com/t/webbrowsercomponent-thanks/50859/5 "2022-09-19T16:13:27Z")

</div>

Hi @jrlanglois that is interesting - I just tried it, and it is working for me!

Most puzzling!

I’ve just tried to re-edit it the link.

Pete

---

<div class="post-metadata">

**Author:** ![cpr2323](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/cpr2323/32/18682_2.png) [@cpr2323](https://forum.juce.com/u/cpr2323)\
**Post date:** [September 19, 2022, 4:31pm UTC](https://forum.juce.com/t/webbrowsercomponent-thanks/50859/6 "2022-09-19T16:31:05Z")

</div>

![Screenshot_20220919-093035](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/e/eb15584ca9a675903d7533182c47cf3d737d4f3b.png)

---

<div class="post-metadata">

**Author:** ![peteatjuce](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/peteatjuce/32/2347_2.png) [@peteatjuce](https://forum.juce.com/u/peteatjuce)\
**Post date:** [September 19, 2022, 6:17pm UTC](https://forum.juce.com/t/webbrowsercomponent-thanks/50859/7 "2022-09-19T18:17:05Z")

</div>

Well I never!

Here is the link with spaces in to break it up!

(removed broken link)

Pete

---

<div class="post-metadata">

**Author:** ![stephenk](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/stephenk/32/15198_2.png) [@stephenk](https://forum.juce.com/u/stephenk)\
**Post date:** [September 19, 2022, 6:49pm UTC](https://forum.juce.com/t/webbrowsercomponent-thanks/50859/8 "2022-09-19T18:49:42Z")

</div>

still broken.

---

<div class="post-metadata">

**Author:** ![gm1](https://avatars.discourse-cdn.com/v4/letter/g/7ab992/32.png) [@gm1](https://forum.juce.com/u/gm1)\
**Post date:** [September 19, 2022, 7:02pm UTC](https://forum.juce.com/t/webbrowsercomponent-thanks/50859/9 "2022-09-19T19:02:43Z")

</div>

@peteatjuce the link isn’t the problem, I guess the issue is that it’s just a message thread between the two of us. Totally fine by me to share but i dont know how to do that…

---

<div class="post-metadata">

**Author:** ![peteatjuce](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/peteatjuce/32/2347_2.png) [@peteatjuce](https://forum.juce.com/u/peteatjuce)\
**Post date:** [September 19, 2022, 8:13pm UTC](https://forum.juce.com/t/webbrowsercomponent-thanks/50859/10 "2022-09-19T20:13:23Z")

</div>

@gm1 yeah, that has got me puzzled too then!!

Pete

---

<div class="post-metadata">

**Author:** ![peteatjuce](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/peteatjuce/32/2347_2.png) [@peteatjuce](https://forum.juce.com/u/peteatjuce)\
**Post date:** [September 21, 2022, 9:35am UTC](https://forum.juce.com/t/webbrowsercomponent-thanks/50859/11 "2022-09-21T09:35:32Z")

</div>

Hi all,

Now that I’ve realised that link was actually from a private message thread :), the gist of the problem as discussed with @gm1 is easy enough to show with Wotja 22 on Windows 10:

1. Using FL studio 20 or Ableton Live 11…
2. Open Wotja VST3 the first time to get the Web View Component based help window
3. Close or collapse the whole plugin window (not the help window)
4. Reopen the plugin
5. The frame of the help window is still there but the Web View Component is gone (transparent)

@gm1 has seen exactly the same issue with their plug-in, so it sounds like a JUCE generic issue of some sort.

Best wishes, Pete

---

<div class="post-metadata">

**Author:** ![peteatjuce](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/peteatjuce/32/2347_2.png) [@peteatjuce](https://forum.juce.com/u/peteatjuce)\
**Post date:** [September 21, 2022, 9:39am UTC](https://forum.juce.com/t/webbrowsercomponent-thanks/50859/12 "2022-09-21T09:39:27Z")

</div>

And here is what I shared with @gm1 about my WebBrowserComponent code; we didn’t see anything obviously wrong with it.

Depending on platform, I use a Component like this:

```auto
#if defined(IM_TARGET_TVOS)
class MyWebBrowserComponent : public juce::Component {
#elif defined(IM_TARGET_WINDOWS)
class MyWebBrowserComponent : public juce::WindowsWebView2WebBrowserComponent {
#else // defined(IM_TARGET_WINDOWS)
class MyWebBrowserComponent : public juce::WebBrowserComponent {
#endif // defined(IM_TARGET_WINDOWS)

```

…

```auto
public:
#if defined(IM_TARGET_TVOS)
  MyWebBrowserComponent(WJX_OnboardScreenVC* parent)
    : juce::Component(),
#elif defined(IM_TARGET_WINDOWS)
  MyWebBrowserComponent(WJX_OnboardScreenVC* parent)
    : juce::WindowsWebView2WebBrowserComponent(
        false, [] {
          juce::File appOrDLLPath = juce::File::getSpecialLocation(juce::File::currentApplicationFile);
          juce::File parentFolderToAppOrDLL = appOrDLLPath.getParentDirectory();
          juce::File webView2LoaderFile = parentFolderToAppOrDLL.getChildFile("WebView2Loader.dll");

          auto userDataFolder = ImFile::sGetTmpFolder(ImContext::sGetImContextSingleInstanceApp());
          userDataFolder.appendPath("userDataFolder");
          userDataFolder.Mkdirp();
          juce::File jUserDataFolder(juce::String::fromUTF8(userDataFolder.getFilePath().c_str()));
          return juce::WebView2Preferences()
            .withDLLLocation(webView2LoaderFile)
            .withUserDataFolder(jUserDataFolder);
        }()),
#else // defined(IM_TARGET_WINDOWS)
  MyWebBrowserComponent(WJX_OnboardScreenVC* parent) : juce::WebBrowserComponent(false),
#endif // defined(IM_TARGET_WINDOWS)
    mParent(parent)
  {
#if defined(IM_TARGET_TVOS)
#else // defined(IM_TARGET_TVOS)
    refresh();
    clearCookies();
#endif // defined(IM_TARGET_TVOS)
  }

```

So, nothing very special there; on Windows I use a special version of the browser that renders better on modern Windows platforms (e.g. allows it to embed svg images, and uses a nicer font etc.). NB: WJX\_OnboardScreenVC is simply a variant of juce::Component, that owns the instance of MyWebBrowserComponent.

When I create the instance, I do this:

```auto
  webBrowser = std::make_shared<MyWebBrowserComponent>(this);
  webBrowser->setBounds(0, 0, 200, 200); // Required for page load to work...

```

Note the comment in the second line of code; just FWIW.

Other than that, the way I handle the virtual methods is as follows:

```auto
#if defined(IM_TARGET_TVOS)
#else // defined(IM_TARGET_TVOS)
bool MyWebBrowserComponent::pageAboutToLoad (const juce::String& newURL) {
  if (newURL.startsWith("http")) {
    // https reference - use external browser
    im_web_LaunchURLViaExternalBrowser(newURL.toUTF8().getAddress());
    // Return false, to stop the navigation happening internally!
    return false;
  }

  if (newURL == "about:blank") {
    // Required for Android!
    return false;
  }

  return true;
}

// You can override this method to show some other error page by calling
// goToURL. Return true to allow the browser to carry on to the internal
// browser error page.
bool MyWebBrowserComponent::pageLoadHadNetworkError (const juce::String& errorInfo) {

#ifdef IM_DEBUG
  im_trace("IM_DEBUG: MyWebBrowserComponent::pageLoadHadNetworkError (%s)\n", errorInfo.toUTF8().getAddress());
#endif // IM_DEBUG

  ImThread::sDelayToMainThread(std::chrono::milliseconds(200), [this]() {
    // Required on Android, otherwise ERROR is displayed
    mParent->pageIndexUpdated();
  });

  return false; // Required on Android!
}

// This callback occurs when the browser attempts to load a URL in a new window.
// This won't actually load the window but gives you a chance to either launch a
// window yourself or just load the URL into the current window with goToURL().
void MyWebBrowserComponent::newWindowAttemptingToLoad (const juce::String& newURL) {
  goToURL(newURL);
}

// This callback happens when the browser has finished loading a page.
void MyWebBrowserComponent::pageFinishedLoading (const juce::String& url) {
  // Re-establish z-order of overlaid components.
  // Seems to be necessary for Android!

  mParent->fixZOrdering();
}

...

void WJX_OnboardScreenVC::fixZOrdering() {
  // Make sure the components that we use to overlay the WebView, remaining on top; especially for Android...
  closeButton->toFront(false);
  backButton->toFront(false);
}
#endif // defined(IM_TARGET_TVOS)

I hope there is some clue in there...

Hoping that all helps somebody else,

Pete
```