Android Webview Javascript - References to Scripts not working

Question

Developing on Android Studio 1.0.1, API 21. Following is the folder structure - enter image description here

It's essentially an AngularJS based app that I want to wrap inside a webview container and run on Android.

My Android side of code is -

 WebView myWebView = (WebView) findViewById(R.id.webview);
 WebSettings webSettings = myWebView.getSettings();
 webSettings.setJavaScriptEnabled(true);
 webSettings.setDomStorageEnabled(true);
 myWebView.setWebChromeClient(new WebChromeClient());

 String filePath = "file:///android_asset/www/index.html";
 myWebView.loadUrl(filePath);

The references in html are all relative -

<script src="lib/jquery.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
<script src="lib/bootstrap.min.js"></script>

But interestingly enough, I've searched most places, and I'm not sure where am I going wrong. My references aren't working at all! So I can't access my lib files, my scripts, my css. Also, if I run an external angular web page inside the webview, with the same Java code, it runs perfectly!

Any help is appreciated.

Note : Please don't suggest using Cordova/PhoneGap. It's a project requirement to go native(and I frankly don't understand why, but I'm only a developer who has no say in it).

On a side note : I'm facing the same problem with the iOS webview. References aren't working!

UPDATE

Tried the following things :

Tried loadDataWithBaseURL(), doesn't work.

Tried all possible scenarios for paths. Nothing worked.

Removed all the scripts from the folder and put them at the root level, and modified links to have no paths, simply file names. Still doesn't work. And this is way too weird.

score 15 · Answer 1 · answered Jan 28 '15 at 12:13

15

I managed to do something similar in the following way:

WebView webView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webView.setWebChromeClient(new WebChromeClient());

try {
    String html = readAssetFile("www/index.html");
    webView.loadDataWithBaseURL("file:///android_asset/www/", html, "text/html", "UTF-8", null);
} catch (IOException e) {
}

Where 'readAssetFile' is:

private String readAssetFile(String fileName) throws IOException {
    StringBuilder buffer = new StringBuilder();
    InputStream fileInputStream = getAssets().open(fileName);
    BufferedReader bufferReader = new BufferedReader(new InputStreamReader(fileInputStream, "UTF-8"));
    String str;

    while ((str=bufferReader.readLine()) != null) {
        buffer.append(str);
    }
    fileInputStream.close();

    return buffer.toString();
}

Also, my page is a simple one - just to test an image, the angularjs lib and a css stylesheet:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<script src="libs/angular.min.js"></script>
</head>

<body>

<img src="images/IMG_7765.JPG" alt="De nada" width="200" height="300">

<div ng-app="">

<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name" value="John"></p>
<p ng-bind="name"></p>

</div>

</body>
</html>

Also, my file structure is the following

enter image description here

Hope it helps :)

answered Jan 28 '15 at 12:13

Spiri

1,283
11
24

This should work, seems very logical. But what's funny is that, it doesn't work. I should probably try on Eclipse rather than Android Studio. – Kazekage Gaara Jan 28 '15 at 19:08
There has to be something seriously wrong with my dev system, it doesn't work on Eclipse too. – Kazekage Gaara Jan 28 '15 at 19:47
Strange (tested on 4.3, 4.4.4 and 5.0 and seems to work ok) - dindn't test with gradle though. The asset html page is shown, right? (only the references don't work) Taught that maybe the assets folder doesn't get into the apk as it should. – Spiri Jan 29 '15 at 09:39
Yea. It's really strange. And it's happening for both Android and iOS. What I'm thinking now is to test this on a couple of different machines and see what happens. – Kazekage Gaara Jan 29 '15 at 20:35
I finally found out the problem, please see my answer. It was the base tag. I'm awarding you the bounty as your HTML template was what made me realize that the extra thing I have is the base tag. Thanks. – Kazekage Gaara Jan 31 '15 at 22:18
You saved my day! Thanks a lot! – flame3 Feb 23 '17 at 07:07
the DOM enabled made it work... thank you, my friend. – Zach Bublil Feb 04 '18 at 12:08

Max Worg · Answer 2 · 2015-01-22T21:43:58.970

4

try putting a forwardslash in front of "lib" in the path of your sources like this (since it is a relative call the browser will complete it for you http://domain/lib/jquery.min.js instead of http://domain.comlib/jquery.min.js).

UPDATE - I believe AngularJS uses the ng-src directive for including external sources:

<script ng-src="/lib/jquery.min.js"></script>
<script ng-src="/lib/angular.min.js"></script>
<script ng-src="/lib/angular-route.min.js"></script>
<script ng-src="/lib/bootstrap.min.js"></script>

Alternatively you could also complete the path yourself if you don't really need the code to be dynamic like this (this is also a quick test to make sure everything is actually working):

<script ng-src="http://domain.com/lib/jquery.min.js"></script>
<script ng-src="http://domain.com/lib/angular.min.js"></script>
<script ng-src="http://domain.com/lib/angular-route.min.js"></script>
<script ng-src="http://domain.com/lib/bootstrap.min.js"></script>

edited Jan 22 '15 at 21:43

answered Jan 22 '15 at 21:33

Max Worg

2,932
2
20
35

Had tried the extra forward slash long before posting this question. And frankly, I had thought that it would work. But sadly, it doesn't. – Kazekage Gaara Jan 22 '15 at 21:38
I updated my answer - I believe you need to be using the ng-src directive with AngularJS – Max Worg Jan 22 '15 at 21:44
The scripts are residing on a server or are they in the "lib" folder on the Android device? – Max Worg Jan 22 '15 at 21:50
inside the lib folder. – Kazekage Gaara Jan 22 '15 at 21:50
It turns out you may need to use WebView.loadDataWithBaseURL(). Here is an example: http://stackoverflow.com/questions/9414312/android-webview-javascript-from-assets – Max Worg Jan 22 '15 at 22:03
Seems that you've pointed in the right direction. Let me look into it. Thanks so far. – Kazekage Gaara Jan 22 '15 at 22:21
Still nothing. I think I'm doing something stupidly incorrect. – Kazekage Gaara Jan 22 '15 at 22:37
If you tried the previous example in the link I provided make sure that you have added the correct folders in the path to the assets to match your app's directory structure: file:///android_asset/www – Max Worg Jan 22 '15 at 22:42
Yea. Double checked that. Still doesn't work. This is really frustrating. – Kazekage Gaara Jan 22 '15 at 22:47
@KazekageGaara never call your self stupid. It's a bad habit. – danny117 Jan 26 '15 at 18:50
@MaxWorg I found the problem. It was nothing wrong on the Android side. I had a base tag in my HTML that was causing the problem. Thanks. – Kazekage Gaara Jan 31 '15 at 22:19

danny117 · Answer 3 · 2015-01-26T18:52:36.063

I haven't tried this but put your index.html page into a string and pass it in as data. the baseUrl is then http://domain.com

public void loadDataWithBaseURL (String baseUrl, String data, String mimeType, String encoding, String historyUrl)

Webview with both local and interweb (internet and intranet) resources. You have to use loadDataWithBaseURL and all of the interweb resources have to be http:// or all of the file access has to be file:// resources in anything from the web also have to be specified with http:// that is the links and such in anything that comes from the web can not be //i/image.jpg they have to be http://www.example.com/i/image.jpg. That is web or file system have to be completely qualified.

Below I'm using a local directory in the file system by passing in the complete pathname of a file (it works to get a directory) The html is put into a string. Because I'm using loadDataWithBaseURL I can also access the interweb when it is prefixed by http://

StringBuilder sb = new StringBuilder();
                sb.append("<html><body><div style=\"width:100%; text-align:center; font-size:large;\">");
                sb.append(kmlmo.markeroptions.getTitle());
                sb.append("</div>");

                sb.append("<a href = \"http://www.example.com/link.html\">mylink</a>");

                sb.append(kmlmo.markeroptions.getSnippet());
                sb.append("</body></html>");
                View v = getView();
                if (v != null) {
                    wv = (WebView) v.findViewById(R.id.webView1);
                    if (wv != null) {
                        String localPath = "file://" + kmlmo.path;
                        String temp = sb.toString();
                        wv.loadDataWithBaseURL(localPath, temp, "text/html",
                                "UTF-8", "");
                    }

it took forever to get the file:/// to work correctly. Keep trying you'll get it. — danny117, Jan 26 '15 at 18:48
I found the problem. It was nothing wrong on the Android side. I had a base tag in my HTML that was causing the problem. Thanks. — Kazekage Gaara, Jan 31 '15 at 22:19

score 2 · Accepted Answer · answered Jan 31 '15 at 22:16

2

After a lot of poking around, and a lot of help from the people who answered, the culprit in my code was the base tag. I removed it and also removed the html5mode thing. So, to sum it up, I removed the following :

 <base href="/">

and

$locationProvider.html5Mode(true);

And everything started working.

answered Jan 31 '15 at 22:16

Kazekage Gaara

14,972
14
61
108

where these two line are located ? – McLan Oct 28 '16 at 15:42

score 0 · Answer 5 · answered Oct 05 '21 at 11:03

It's simple :

Add this code in app.module.ts

//in App.module.ts : 

//import these packages  

import { APP_BASE_HREF, LocationStrategy, HashLocationStrategy } from '@angular/common';


// add these packages into providers as below : 

@NgModule({
    imports: 
     [
      .....
     ],
    declarations: 
     [
     ....
     ],
    providers: 
      [
        ....
        { provide: APP_BASE_HREF, useValue: '/' },
        { provide: LocationStrategy, useClass: HashLocationStrategy },
        
        ....
       ]
   ....
   
   })
   
   export class Appmodule{}

remove <base href="/"> from index.html file
run command npm run build
double click the index.html file from dist folder.

Your app will run.

Android Webview Javascript - References to Scripts not working

5 Answers5