Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Webview Javascript - References to Scripts not working

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.

like image 223
Kazekage Gaara Avatar asked Jan 22 '15 21:01

Kazekage Gaara


2 Answers

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 :)

like image 80
Spiri Avatar answered Oct 09 '22 01:10

Spiri


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>
like image 32
Max Worg Avatar answered Oct 08 '22 23:10

Max Worg