CODEWITHSUNDEEP
xamarinxamarin.androidxamarin.forms
Nestor
Nestor

Reputation: 8384

How to load local HTML files in Xamarin Forms WebView

I intend to load local HTML files into a Xamarin Forms WebView.

I've added the HTML files to the assets/HTML folder, and its Build Action is set to AndroidAsset.

I've implemented the base URL finder interface:

public class BaseUrl_Android:IBaseUrl
    {
        public string Get()
        {
            return "file:///android_asset/";
        }
    }

I have tried to load the file from the using this in the shared portable code: 

   string baseUrl = DependencyService.Get<IBaseUrl>().Get();
   string url = baseUrl + "HTML/local.html";
   myWebView.Source = url;

I also tried a custom WebViewRenderer, and used this code:

protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
    {
        base.OnElementChanged(e);
        if (e.OldElement == null)
        {
            // lets get a reference to the native control
            var webView = (global::Android.Webkit.WebView)Control;
            // do whatever you want to the WebView here!                                
            webView.LoadUrl(DependencyService.Get<IBaseUrl>().Get()+"HTML/local.html");
            webView.SetWebViewClient(new MyWebViewClient());
        }

With both solutions I get an error:

enter image description here

What else should I try?

Upvotes: 5

Views: 9550

Answers (4)

Max CHien
Max CHien

Reputation: 143

Here is related post and official sample

See if this can help.

Xamarin load local html

and

Official sample here 

public LocalHtmlBaseUrl ()
    {
        var browser = new BaseUrlWebView (); // temporarily use this so we can custom-render in iOS

        var htmlSource = new HtmlWebViewSource ();

        htmlSource.Html = @"<html>...</html>";

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


        browser.Source = htmlSource;

        Content = browser;
    }

Upvotes: 0

Scott Nimrod
Scott Nimrod

Reputation: 11570

I'm not sure why you had trouble. I followed your steps and things just worked:

The snippet looks like this:

public ViewModel()
{
    var rootUrl = DependencyService.Get<INativeURL>().Acquire();
    Url = $"{rootUrl}content.html";
}

NOTE:

"Content.html" is the name of my local webpage that I added to the "Assets" folder of my local Droid project.

XAML

<ContentPage.BindingContext>
    <local:ViewModel/>
</ContentPage.BindingContext>

<WebView Source="{Binding Url}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />

ViewModel:

    public ViewModel()
    {
        var rootUrl = DependencyService.Get<INativeURL>().Acquire();
        Url = $"{rootUrl}content.html";
    }

    string _url = null;
    public string Url
    {
        get
        {
            return _url;
        }
        set
        {
            if (_url != value)
            {
                _url = value;
                OnNotifyPropertyChanged();
            }
        }
    }

Interface:

public interface INativeURL
{
    string Acquire();
}

Android Contract:

[assembly: Dependency(typeof(NativeURL_Android))]
namespace my_namespace.Droid
{
    public class NativeURL_Android : INativeURL
    {
        public string Acquire() => "file:///android_asset/";
    }
}

Upvotes: 0

Alper Silistre
Alper Silistre

Reputation: 167

This is my MainActivity.cs;

WebView web_view;

protected override void OnCreate(Bundle bundle)
{
    base.OnCreate(bundle);

    // Set our view from the "main" layout resource
    SetContentView(Resource.Layout.Main);

    web_view = FindViewById<WebView>(Resource.Id.webview);
    web_view.Settings.JavaScriptEnabled = true;

    web_view.LoadUrl("file:///android_asset/Home.html");

}

You must put your html file in to Assets folder and sets html build action AndroidAsset. With this way I can load html file into WebView.

Upvotes: 0

Art
Art

Reputation: 3167

Your source should be of type HtmlWebViewSource and not string.

var html = new HtmlWebViewSource ();
html.BaseUrl = DependencyService.Get<IBaseUrl> ().Get ();

Upvotes: 0

Related Questions