Question

I am designing a small application and so far I’ve been lucky enough to keep my threading simple and efficient so the ui is responsive.

Now I’m facing a problem where I need to load large local html files in tabbed webbrowser controls. The loading of those pages freezes the ui. I’ve seen many threads talking about webbrowsers living in another thread, but all of them seemed to keep the webbrowser out of the main ui.

I can’t seem to get it to work correctly. I tried loading the html file in another thread as a memory stream and then feeding it to the webbrowser, I tried creating the webbrowser in another thread but got shut down with the classic inter thread exception, tried SupendLayout…

Now, I know about the threading rule that states that you can’t add a control that was created in another thread to a control from some other thread… My question is simple enough, is there any way to load a large html file in a displayed webbrowser without freezing the ui while doing so?

No need to be a thread related answer if this isn’t required to solve my problem, but here is my last and kind of lame try:

    public void openHtml(string input, bool isHtml = true, string tabTitle = "")
    {
        if (!this.loading)
        {
            this.loading = true;

            ManualResetEvent resetEvent = new ManualResetEvent(false);
            Panel panel = new Panel();
            TabPage tab = new TabPage();
            WebBrowser browser = null;

            Thread t = new Thread(() =>
            {
                browser = new WebBrowser();
                browser.CreateControl();
                browser.SuspendLayout();

                resetEvent.Set();

                if (isHtml)
                    browser.DocumentText = input;
                else
                    browser.Navigate(input);

                Application.Run();
            });

            t.IsBackground = true;
            t.SetApartmentState(ApartmentState.STA);
            t.Start();

            resetEvent.WaitOne();

            panel.BorderStyle = System.Windows.Forms.BorderStyle.Fixed3D;
            panel.Controls.Add(browser);
            panel.Dock = DockStyle.Fill;

            browser.ObjectForScripting = new JsScriptInterface(this, browser);
            browser.Dock = DockStyle.Fill;

            tab.Controls.Add(panel);
            tab.Text = tabTitle;

            this.tabs.TabPages.Add(tab);
        }
    }

Any help will be appreciated. Thanks

Answer 1

I’ve had similar problems in the past and can tell you that there’s no ‘real’ solution. As you know, the problem is that UI code must utilize the same thread, and the not-nice threading code is in a Control you don’t have control over (i.e. WebBrowser). Unless someone writes a better WebBrowser control with proper threading that doesn’t hang the UI (unlikely), we’re not going to have an awesome solution.

That said, there are 2 options that might work out for you – I’ve only played with them a little and haven’t been allocated the time to get either into a production capable state. So perhaps consider this a partial solution :/

1. Host non-UI threaded Control in your control (a, b).
2. Render off-screen and swap

In Option 1, the links talks about hosting an external app, or WinForms code from another AppDomain, into your app/AppDomain. While I can’t provide you with the (complicated?) code require to do this, I do see it being possible that you could have a WebBrowser control on a different thread (maybe even in a different AppDomain) and then using the techniques described in these links to show this control as-if it’s on your control. The WebBrowser wouldn’t actually be on your Form, but rather a region of your form would have an overlay that would resize/move along with it. I’ve used this to host Notepad++ in a WinForms app successfully, resizing is slightly clunky but very usable. You could start by trying to render your HTML files in plain IE (iexplore.exe) and hosting that app inside your app, and once you get that working try it with the more controllable ActiveX wrapper control (WebBrowser).

Option 2 worked very well for me with a RichTextBox, but I wasn’t able to get WebBrowser to respond with the same success. What I did was generate a hidden Form control with a RichTextBox, loaded my data and let it render. On my main, visible Form, I showed another RichTextBox that said ‘Loading…’ or similiar. When the bg RichTextBox finished, I would move the contents of the Rtf field into the displayed control and it rendered in the blink of an eye. Sadly, WebBrowser does not expose the same level of control over it’s internal data (i.e. the DOM), but you might be able to get farther in the research to using mshtml than I was able to (c, d).

Good Luck!