Android Webview, Loading JavaScript File in Assets Folder

Load CSS and JS files from assets folder in android webview

In android project

WebView myweb = FindViewById<WebView>(Resource.Id.webView1);
myweb.LoadUrl("file:///android_asset/index.html");

In index.html

<link href="style.css" rel="stylesheet" type="text/css">
<script src="script.js"></script> 

And if you need to increase android webview performance and graphic change this properties

myweb.Settings.JavaScriptEnabled = true;
myweb.Settings.DisplayZoomControls = false;
myweb.Settings.SetRenderPriority(WebSettings.RenderPriority.High);
if (Build.VERSION.SdkInt >= BuildVersionCodes.Kitkat)
{
   myweb.SetLayerType(Android.Views.LayerType.Hardware, null);
}

if you are using android studio : view this link

if you need only js or css files view this Answers:

• Load CSS JS from Assets folder
• Android - How to load external javascript files within at runtime generated HTML data?
• Android webview, loading javascript file in assets folder

How to load a js file from assets into webview when loading html from assets?

The issue has been resolved by enabling below properties.

if (Build.VERSION.SdkInt >= Build.VERSION_CODES.JellyBean)
            {
                webView.Settings.AllowUniversalAccessFromFileURLs = true;
                webView.Settings.AllowFileAccessFromFileURLs = true;
            }

Note: Keep the required JS files directly into Assets folder instead of keeping inner folders to keep JS files

-Thanks

Android webview, loading javascript file in assets folder

I tried the same thing, loading a bookmarklet (the javascript code in your loadUrl() call) into a third-party page. My bookmarklet also depends on other assets (javascript and css files) which would not load with a file:///android_asset URL.

That's because the security context of the page is still that of, e.g., http://www.google.com, and that's not allowed access to file: URLs. You should be able to see the errors if you supply/override a WebChromeClient.onConsoleMessage().

I ended up with a kludge where I changed the bookmarklet's asset references to a bogus URL scheme, like:

asset:foo/bar/baz.js

and added a WebViewClient.shouldInterceptRequest() override which looks for those and loads them from assets using AssetManager.open().

One thing I don't like about this kludge is that the asset: scheme is open to any third-party HTML/Javascript on any page my view loads, giving them access to my app's assets.

One alternative, which I didn't try, would be to embed the sub-assets in the bookmarklet using data: URLs, but that can get unwieldy.

I'd much prefer it if there was a way to manipulate the security context of just the JS bookmarklet I'm loading in loadUrl(), but I can't find anything like that.

Here's a snippet:

import android.webkit.WebResourceResponse;
...
    private final class FooViewClient extends WebViewClient
    {
    private final String bookmarklet;
    private final String scheme;

    private FooViewClient(String bookmarklet, String scheme)
        {
        this.bookmarklet = bookmarklet;
        this.scheme = scheme;
        }

    @Override
    public void onPageFinished(WebView view, String url)
        {
        view.loadUrl(bookmarklet);
        }

    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, String url)
        {
        if (url.startsWith(scheme))
            try
                {
                return new WebResourceResponse(url.endsWith("js") ? "text/javascript" : "text/css", "utf-8",
                        Foo.this.getAssets().open(url.substring(scheme.length())));
                }
            catch (IOException e)
                {
                Log.e(getClass().getSimpleName(), e.getMessage(), e);
                }

        return null;
        }
    }

Load external javascript file inside HTML file from android assets folder into WebView

There was an error in my javascript file. It works like I stated in my example. Sorry for wasting your time.

Android WebView JavaScript from assets

Answer:

1. You MUST load the HTML into string:

private String readHtml(String remoteUrl) {
    String out = "";
    BufferedReader in = null;
    try {
        URL url = new URL(remoteUrl);
        in = new BufferedReader(new InputStreamReader(url.openStream()));
        String str;
        while ((str = in.readLine()) != null) {
            out += str;
        }
    } catch (MalformedURLException e) { 
    } catch (IOException e) { 
    } finally {
        if (in != null) {
            try {
                in.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
    return out;
}

2. Load WebView with base URL:

String html = readHtml("http://mydomain.com/my.html");
mWebView.loadDataWithBaseURL("file:///android_asset/", html, "text/html", "utf-8", "");

In this particular case you should have all .js files you want to use on the page to reside somewhere under "assets" folder of project. For example:

/MyProject/assets/jquery.min.js

3. In your remote html page you have to load .js and .css files that reside in your application like:

<script src="file:///android_asset/jquery.min.js" type="text/javascript"></script>

the same applies to all other local resources like images, etc. their path has to start with

file:///android_asset/

A WebView would first load the raw HTML you have provided as string, then pick .js, .css and other local resourses and then would load remote content.

---

Related Topics