Android webview +javascript not showing output in android 4.0.x,3.x

Question

This is my main activity

package com.example.mathjax_issues;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.util.Log;
import android.view.Menu;
import android.webkit.WebResourceResponse;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {


    private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView=(WebView)findViewById(R.id.webView1);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebViewClient(new MyWebViewClient());
        webView.loadUrl("file:///android_asset/MathJax/test/sample-asciimath.html");
//      String html="<!DOCTYPE html> <html> <head> <title>MathJax AsciiMath Test Page</title> <!-- Copyright (c) 2012-2013 The MathJax Consortium --> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" /> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /> <script type=\"text/javascript\" src=\"file:///android_asset/MathJax/MathJax.js?config=AM_HTMLorMML-full\"></script> </head> <body> <p> When `a != 0`, there are two solutions to `ax^2 + bx + c = 0` and they are </p> <p style=\"text-align:center\"> `x = (-b +- sqrt(b^2-4ac))/(2a) .` </p> </body> </html> ";
//      Log.e("html",html);
//      webView.loadDataWithBaseURL("file:///android_asset/MathJax", html, "text/html","utf-8", "");
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }


    private class MyWebViewClient extends WebViewClient
    {

        @Override
        public void onPageFinished(WebView view, String url) {
            // TODO Auto-generated method stub
            super.onPageFinished(view, url);
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            // TODO Auto-generated method stub
            super.onPageStarted(view, url, favicon);
        }




    }



}

This my sample-asciimath.html

<!DOCTYPE html>
<html>
<head>
<title>MathJax AsciiMath Test Page</title>
<!-- Copyright (c) 2012-2013 The MathJax Consortium -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<script type="text/javascript" src="../MathJax.js?config=AM_HTMLorMML-full"></script>

</head>
<body>

<p>
When `a != 0`, there are two solutions to `ax^2 + bx + c = 0` and they are
</p>
<p style="text-align:center">
`x = (-b +- sqrt(b^2-4ac))/(2a) .`
</p>

</body>
</html>

below is the image of my project

enter image description here

when compiling this code in 2.3.3,2.2,4.1.2,4.2.2 latest versions

I get the correct output from the source

enter image description here

but when i compiled the same source in 3.0,3.1 and 4.0.3,4.0.4 android version

I am getting the wrong output like this

enter image description here

Friends pls help me ... I am unable to solve this error ... I think there may be a javascript problem.Hope you guys give me some idea

I am storing the mathjax locally .. in assets

Thanks in advance ...

Solving your problem was described in [this post][1] [1]: http://stackoverflow.com/questions/17029780/display-good-looking-math-formula-in-android?answertab=active#tab-top — , Oct 23 '13 at 07:30
I am using MathJax in my App But its Too Slow is there anyway i can make it work faster and also can i render the Mathml on a TextView. ????? — iAviatorJose, Mar 09 '15 at 05:02

score 6 · Answer 1 · edited Feb 25 '14 at 16:40

6

I had a similar problem. What I did was I copied all the .js files in the same directory as where the html is and added it as follows.

<script type="text/javascript" src="MathJax.js"></script>

I know it sounds a bit stupid, but it worked.

If that doesn't work, copy the .js file into the html file itself and try it like in the header:

<script type="text/javascript">
copy the whole MathJax.js and paste it here
</script>

edited Feb 25 '14 at 16:40

Crystal Meth

589
1
4
16

answered Jul 01 '13 at 11:41

Navin

554
2
9
31

did u find an answer ? well as far as i can say your js file is not loaded.. did you try writing the javascript function inside the HTML file itself. try inserting an alert() on body onload which makes you to hold the process a bit which gives time to load ur JS file. let me know.. – Navin Jul 02 '13 at 09:11
ya i written but nothing loads – Venkatesh S Jul 02 '13 at 10:17
1

is it using any jquery library..? have u loaded it...? did u try putting an alert on body onload. have u inserted an alert in ur MathJax.js at the bottom. So u can see whether htmL loads before jquery.. i spent 2 days to get this work 1 year back.. try inserting alert n see which part it's failing.. – Navin Jul 02 '13 at 10:24
in my html i didnt used jquery in it – Venkatesh S Jul 02 '13 at 10:46
@TonyStark yea sorry alert doesnt work.. well did you write the whole function which is inside MathJax.js inside HTML header eg: try triggering something just to know its calling the appropriate function like change background color, etc. If you can make sure the functions is getting called then we can trouble shoot the problem but if your not sure whether the function is notgetting called then identifying the process is quiet hard. – Navin Jul 02 '13 at 10:53

score 2 · Answer 2 · edited May 23 '17 at 11:45

2

Some people already had this problem (actually... a lot of them...).

One post (and also one answer) got my attention : https://stackoverflow.com/a/7197748/1387484

It appears you have to inject your Javascript call in the WebViewClient manually, after the document was fully loaded. I doesn't have more explanation but maybe you can try this way !

edited May 23 '17 at 11:45

Community

1
1

answered Jul 01 '13 at 07:37

mithrop

3,283
2
21
40

cyberflohr · Answer 3 · 2013-07-02T13:11:49.587

It seems the problem is related to this android bug. If you are referencing files with url parameters a HTTP 404 (file not found) occurs, in your case the script "MathJax.js?config=AM_HTMLorMML-full" will not be found and therfor not loaded.

Overcoming Honeycomb and Ice Cream Sandwich’s Broken WebView URLs

<!-- hack for honeycomb & ICS -- first script tag will not load but it's -->
<!-- needed for proper MathJax initialisation - clean solution would be to -->
<!-- pass the init data "AM_HTMLorMML-full" in some other way to MathJax -->
<script type="text/javascript" src="../MathJax.js?config=AM_HTMLorMML-full"></script>
<script type="text/javascript" src="../MathJax.js"></script>

score 2 · Answer 4 · answered Jul 02 '13 at 14:39

It works when the script does not locate in an outer folder compared to the html file.

If you get the html file out of the MathJax folder and change the line in html file as below, it will work.

<script type="text/javascript" src="./MathJax/MathJax.js?config=AM_HTMLorMML-full"></script>

And of course change the java file to webView.loadUrl("file:///android_asset/sample-asciimath.html");

score 0 · Answer 5 · answered May 02 '14 at 00:43

The Problem is because you have to set the to configurations (AM_HTMLorMML-full.js) for mathjax in your html file (Copy the code to your file), and you have to epecify the complete path of the MathJax.js file, like in the code below:

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
           <script type="text/javascript" src="../MathJax/MathJax.js">
                MathJax.Hub.Config({
                    config: ["MMLorHTML.js"],
                    extensions: ["asciimath2jax.js","MathEvents.js","MathZoom.js","MathMenu.js","toMathML.js"],
    jax: ["input/AsciiMath","output/HTML-CSS","output/NativeMML"]
                });
                MathJax.Ajax.loadComplete("[MathJax]/config/AM_HTMLorMML-full.js");
           </script>
    </head>
    <body>
        <p>`\sqrt{2x + 1}`</p>
    </body>
    </html>

Android webview +javascript not showing output in android 4.0.x,3.x

5 Answers5