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?

score 13 · Answer 1 · edited Nov 06 '19 at 08:16

13

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;

edited Nov 06 '19 at 08:16

Subhan Ali

1,370
13
17

answered Aug 29 '17 at 09:43

Kona Suresh

1,836
1
15
25

1

This should probably be marked as the answer. This works on both IOS and Android. – Sanchal Kunnel Mar 12 '18 at 03:49
@SanchalKunnel Does html/css/javascript file needs to be added to two projects? or adding to common project will work? – chandravadan Jul 12 '18 at 19:52
@chandravadan I believe you have to add it to both the android and iOS projects. – Sanchal Kunnel Jul 13 '18 at 04:07
1

I forgot , think added into both ios and android – Kona Suresh Jul 13 '18 at 05:53
@KonaSuresh I was able to use single HTML file and use it in iOS and Android platforms. See here [Link](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/files?tabs=vsmac#loading-files-embedded-as-resources) – chandravadan Jul 19 '18 at 20:53
1

Why I get "IWebViewBaseUrl could not be found"? – Jeremy Parker Apr 04 '19 at 15:10
@JeremyParker you need to create that interface in your forms . – niketan Nov 29 '19 at 12:18

score 5 · Answer 2 · answered Jul 23 '18 at 10:31

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/";
     } 
   }
 }

score 3 · Accepted Answer · answered Jul 17 '17 at 10:04

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".

Thanks, I will look at this – user3355961 Jul 18 '17 at 08:47 — user3355961, Jul 18 '17 at 08:47

score 1 · Answer 4 · answered Jul 19 '18 at 21:00

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://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/files?tabs=vsmac#loading-files-embedded-as-resources

score 0 · Answer 5 · answered Jul 14 '17 at 13:24

0

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.

answered Jul 14 '17 at 13:24

user3355961

725
3
16
34

That doesn't count as it is going to work only on Android. You should really create dependency service and in each implementation return appropriate string. For android it is "file:///android_asset/TestWebPage.html", for IOS it will be something else – Yuri S Jul 17 '17 at 17:48
It only needs to work in Android, I did say that in the question. – user3355961 Jul 18 '17 at 08:46

Loading Local HTML with WebView Xamarin Forms

5 Answers5

Linked