How to load static CSS, JS, media files in WebView?

[somelinguist]

Hi,

I might be missing the obvious, but I'm not sure how to load static images, CSS, or JS files when using WebView.

Looking at the docs, I thought if I set the baseUri parameter of of LoadHtml() to some file URI, then referenced them in the HTML string, it would use that to load the resources.

 this.LoadHtml(someHTMLString, someFileURI);

Is it possible? Or am I missing something? Thanks!

[somelinguist]

For more context, I’m currently trying this with a Mac64 target. I’ve made sure the files I want to load are correctly copied to the Resources folder in the app bundle during build in a wwwroot subdirectory.

In the call to LoadHtml, the baseUri parameter is set to Uri generated from

Eto.EtoEnvironment.GetFolderPath(Eto.EtoSpecialFolder.ApplicationResources) with “/wwwroot” appended.

In the HTML string, the files are referenced with something like “/path/to/file.js” etc which corresponds to the path relative to the wwwroot folder in the app bundles Content/Resources folder.

However none of the files seem to load.

Should this work like I think, or am I going about this wrong?

Thanks!

[somelinguist]

Update: I had a chance to build the same app for a WPF target, and it seems to work, loading the requested resources. So it looks like my issue my be specific to WkWebView? I've tried both the Mac64 and macOS targets now, with the same results that the local resources aren't loaded, even though they're in the bundle.

[somelinguist]

Ok, I figured out this is an issue with WkWebView's security. If you search for trying to load local resources with webview.LoadHtmlString(), there are tons of results (for, example https://developer.apple.com/forums/thread/126095?answerId=395382022#395382022).

Basically, with WkWebView, you have to give it read access to the directory the resources are in, which you can do by calling webview.LoadFileUrl.

The first parameter is a uri that must exist, and the second is the uri that file/directory at the first uri should have access too. I've found that calling it with both parameters set to the same thing works. After calling something like webview.LoadFileUrl(baseURI, baseURI), subsequent calls to webview.LoadHtmlString(html, baseURI) should work.

Changing the the the Mac handler's LoadHtml() from this

Eto/src/Eto.Mac/Forms/Controls/WKWebViewHandler.cs

Lines 291 to 294 in d51ed9c

	public void LoadHtml(string html, Uri baseUri)
	{
	Control.LoadHtmlString(html, baseUri.ToNS());
	}

to something like the following should work:

                public void LoadHtml(string html, Uri baseUri)
		{
			Control.LoadFileUrl(baseUri.ToNS(), baseUri.ToNS());
                        Control.LoadHtmlString(html, baseUri.ToNS());
		}

I didn't have the time to build Eto to test it, and I couldn't override LoadHtml() since it wasn't virtual, but calling Control.LoadFileUrl(baseUri.ToNS(), baseUri.ToNS()); in a custom Mac handler's overridden Initialize() where baseUri was the same in later calls to LoadHtml() did work. (I hope that makes sense).

Another thing to note is that the baseURI on Mac must have a trailing /, otherwise the last element seems to get cut off .

I've tested it with setting the baseUri to Eto.EtoEnvironment.GetFolderPath(Eto.EtoSpecialFolder.ApplicationResources) with "/wwwroot/" appended. It then works on Mac, and I tested to make sure it didn't break the Wpf target as well.