3

I am very new to Android Dev and I am developing what I thought would be a simple app. I have some HTML code that is stored is the raw resources folder - the code includes some Javascript. When I run the code in Google Chrome it runs fine - however when I load it into the webview using the loadData function it doesn't run the Javascript.

I have enabled javascript with:

mWebView.getSettings().setJavaScriptEnabled(true);

I need to be able to run this Javascript within the browser - any help?

Improve this question

5 Answers 5

Reset to default
9

Try this:

webView.loadDataWithBaseURL("blarg://ignored", getData(), "text/html", "utf-8", "");

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

2 Comments

Thanks - works perfectly and just what I needed, but see my extended answer above based on this one
Doesn't work for string data from url "https:// www.youtobe.com/" (got a page using get request)
3

Try call JS function from code. Like this:

mWebView.loadUrl("javascript:myFunction()");
Improve this answer

Comments

1

What does the loaded HTML data look like? In my case, the raw HTML data I generated was in the format:

<html>
<head>
<style>..</style>
<script>..</script>
</head>
<body>...</body>
</html>

Testing in a normal browser, things worked as expected. However, once I had used WebView.loadData, the CSS seemed to be recognized but I found that the Javascript was not working.

What found that worked for me was moving the Javascript to external files (more specifically I put the scripts I needed to assets/ using content providers.

<html>
<head>
<link rel="stylesheet" type="text/css" href="content://PATHTOSTYLESHEET" />
<script src="content://PATHTOJS"></script>
</head>
<body>...</body>
</html>

According to What is the difference between Android webview's loadData and loadDataWithBaseURL it sounds even more simple if you set a proper base URL which your style/scripts are stored - using the appropriate file:// for anything you store locally.

Improve this answer

Comments

0

I am following up on @Cobaia's answer above, with another (I think) useful feature:

Since I need to keep changing the embedded HTML while testing and debugging, I decided to grab the raw page from my local web server during the development of the page and pass it to the webView as follows:

String url, str;

str = getFromURL(url);
webView.loadDataWithBaseURL("blarg://ignored", str, "text/html", "UTF-8", "");

where getFromURL() is defined as:

    public String getFromURL(String urlToRead) {
      URL url;
      HttpURLConnection conn;
      BufferedReader rd;
      String result = "";
      char[] chunk = new char[8192];
      int blen = chunk.length;
      int amt;      

      try {
         url = new URL(urlToRead);
         conn = (HttpURLConnection) url.openConnection();
         conn.setRequestMethod("GET");


         rd = new BufferedReader(new InputStreamReader(conn.getInputStream()));
         while ((amt = rd.read(chunk, 0, blen)) > 0) {
             result += new String(chunk, 0, amt);
          }
         rd.close();
      } catch (Exception e) {
         e.printStackTrace();
      }
      return result;
   }

Note that I had to create a special controller (I'm using CodeIgniter) to allow downloading the file as a text file from the server.

Hope this hint helps others too!

Improve this answer

Comments

0

The above solutions did not work for me because I was loading a string that held the HTML instead of a separate HTML file. The HTML in the string referenced JavaScripts that were in assets/www/. What worked was to use mWv.loadDataWithBaseURL("file:///android_asset/www/", HTML_AS_STRING, "text/html", "UTF-8", null);

See below for a full example. The example create a webview, loads the HTML from the string, and then calls a function in a separate JavaScript file. The function simply shows an alert.

public class MainActivity extends Activity{

    private WebView mWv;

    private static final String HTML_AS_STRING = 
            "<!DOCTYPE html>"                                   +
            "<html>"                                            +
            "<head>"                                            +
            "</head>"                                           +
            "<body>"                                            +

            "<p>Just some text in a paragraph.</p>"             +
            "<div align=\"center\" style=\"color:#0000FF\">"    +
            "<h3>This is a heading in a div element</h3>"       +
            "<p>This is some text in a div element.</p>"        +
            "</div>"                                            +

            "<font size=\"4\" color=\"0000FF\">"                +
            "This is some sized and colored text."              +
            "</font>"           
                                                                +
            "<script src=\"index.js\"></script>"                +

            "</body>"                                           +
            "</html>";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);

        mWv = (WebView)findViewById(R.id.webview);      
        mWv.getSettings().setJavaScriptEnabled(true);

        mWv.setWebViewClient(new WebViewClient(){
            @Override  
            public void onPageFinished(WebView view, String url){  
                mWv.loadUrl("javascript:showAlert()");
            }  
        });
        mWv.setWebChromeClient(new WebChromeClient());

        mWv.loadDataWithBaseURL("file:///android_asset/www/", HTML_AS_STRING, "text/html", "UTF-8", null);      
    }
}

index.js (A separate file in assets/www/):

function showAlert() {
    alert("A simple alert!");
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.