CODEWITHSUNDEEP
javajavascriptandroidwebviewmathjax
Venkatesh S
Venkatesh S

Reputation: 5492

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

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 ...

Upvotes: 20

Views: 5841

Answers (5)

Willians
Willians

Reputation: 11

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>

Upvotes: 0

Navin
Navin

Reputation: 534

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>

Upvotes: 6

knshn
knshn

Reputation: 3461

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");

Upvotes: 2

cyberflohr
cyberflohr

Reputation: 789

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>

Upvotes: 2

mithrop
mithrop

Reputation: 3363

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 !

Upvotes: 2

Related Questions