How to load local HTML files in Xamarin Forms WebView

Question

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?

It may be helpful to know why you want to do this. Is your entire application going to be the embedded "website"? Is it an embedded help system? Also, you'll need to make sure you're including all the files when packaging - they'll have to be marked Content and you'll need to access on the device. iOS and Android are different about this. You may need to intercept the Navigated event, for example. See this URL as an example: parallelcodes.com/xamarin-forms-use-webview — Auri Rahimzadeh
– Auri Rahimzadeh, Commented Apr 27 at 21:51

Art · Accepted Answer · 2015-03-17 03:11:32Z

0

Your source should be of type HtmlWebViewSource and not string.

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

answered Mar 17, 2015 at 3:11

Art

3,1673 gold badges24 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alper Silistre · Accepted Answer · 2015-07-24 10:43:00Z

0

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.

answered Jul 24, 2015 at 10:43

Alper Silistre

1672 silver badges14 bronze badges

1 Comment

Ashish-BeJovial Over a year ago

Your solution is based on working template, asked question belongs to "Blank App(Xamarin.Forms Portable)"

Scott Nimrod · Accepted Answer · 2015-07-31 13:24:19Z

0

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

answered Jul 31, 2015 at 13:24

Scott Nimrod

11.6k13 gold badges64 silver badges126 bronze badges

1 Comment

Ashish-BeJovial Over a year ago

What is the DependencyService? is it class? if yes then where i have to create and what content i have to write in it?

Community · Accepted Answer · 2017-05-23 12:17:44Z

0

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

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Apr 7, 2017 at 3:12

Max CHien

1431 silver badge8 bronze badges

1 Comment

Max CHien Over a year ago

Add sample link!

Collectives™ on Stack Overflow

How to load local HTML files in Xamarin Forms WebView

4 Answers 4

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related