Loading Local HTML with WebView Xamarin Forms

Question

I am trying to load a local HTML page in a webview with Xamarin forms. I am using the basic example in the dev docs although I can get a URL to load I can't get my own HTML pages to load. This only needs to be done through Android so there is no worries about about IOS and Windows.

The Xaml:

 <WebView
    x:Name="webviewjava"></WebView>

The code behind:

 public partial class javscriptExample : ContentPage
{
    public interface IBaseUrl { string Get(); }
    public javscriptExample()
    {
        InitializeComponent();
        var source = new HtmlWebViewSource();

        source.BaseUrl = DependencyService.Get<IBaseUrl>().Get();

        webviewjava.Source = source;
    }
}

The platform specific file (LocalFile.cs): Just to note this has been set as an Android asset.

 [assembly: Dependency(typeof(LocalFiles))]
namespace maptesting.Droid
{
    public class LocalFiles: IBaseUrl
    {
        public string Get()
        {
            return "file:///android_asset/";
        }

    }
}

and under the asset's folder there is a 'TestWebPage.html', also set as an Android asset.

Although I dont know what the problem is I have put it through debug and the base url is coming back blank. Just to be clear im not getting a file not found, the screen is simply blank. Also, and Im not sure if this makes a difference. There is no syntax highlighting on 'IBaseUrl' in the LocalFiles.cs file. So I'm not sure if it can 'see' it.

Any ideas?

Answer 1

WebView.BaseUrl only tells the WebView where to start looking for files. It's the root folder of the "web site". By default browsers will load the file index.html, so if you rename your file to index.html I believe it should load automatically.

I think this should be possible too:

webviewjava.BaseUrl = DependencyService.Get<IBaseUrl>().Get();
webviewjava.Source = "TestWebPage.html";

Here you're saying "use this location as the default place to look for files" and "look up this file and use it as the source for the HTML".

Answer 2

I am also suffering with the same issue,but I resolved in the following way

Use "UrlWebViewSource" instead of "HtmlWebViewSource"

var urlSource = new UrlWebViewSource();

string baseUrl = DependencyService.Get<IWebViewBaseUrl>().GetBaseUrl();
string filePathUrl = Path.Combine(baseUrl, "imprint.html");
urlSource.Url = filePathUrl;
WebBrowser.Source = urlSource;

Answer 3

You must check the file properties for Build Action = BundleResource

Try this code to load local html file

var source = new HtmlWebViewSource();
        string url = DependencyService.Get<IBaseUrl>().GetBaseUrl();
        string TempUrl = Path.Combine(url, "terms.html");
        source.BaseUrl = url;
        string html;
        try
        {
            using (var sr = new StreamReader(TempUrl))
            {
                html = sr.ReadToEnd();
                source.Html = html;
            }
        }
        catch(Exception ex){
            Console.WriteLine(ex.Message);
        }

Implementations of the interface for each platform must then be provided

iOS

[assembly: Dependency(typeof(BaseUrl))]
namespace yournamespace
{
   public class BaseUrl: IBaseUrl
   {
      public string GetBaseUrl()
      {
        return NSBundle.MainBundle.BundlePath;
      }
   }
}

Android

[assembly: Dependency (typeof(BaseUrl))]
 namespace yournamespace {
   public class BaseUrl_Android : IBaseUrl {
      public string Get() {
        return "file:///android_asset/";
     } 
   }
 }

Answer 4

This is an old post but It may help someone looking to implement with Android, iOS and UWP with just one HTML file. With this approach you only use one HTML file for all platforms.

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/files?tabs=vsmac#loading-files-embedded-as-resources

Answer 5

Im not sure if this counts but I found a work around. Instead of taking the above route I simply did this:

webviewjava.Source = "file:///android_asset/TestWebPage.html";

in the code behind, and just left out the IBaseUrl call altogether. This works as its supposed to.