WebView代码在Android 4.4.2(API 19)模拟器上生成Uncaught TypeError和Uncaught ReferenceError错误

时间:2014-08-07 02:47:08

标签: javascript android webview android-emulator mathjax

在Android 4.4.2 KitKat(API 19)模拟器上运行时,我的代码出现问题...

当我在Android 4.3(API 18)模拟器上模拟我的项目时,它正常工作并使用MathJax创建数学表达式:

Image of emulator

但是当我使用Android 4.4.2模拟器时,应用程序无法正常工作:

Image of emulator

以下是我项目的代码:

package com.testes.testesapp;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;

public class MainActivity extends Activity implements View.OnClickListener {

    private int exampleIndex = 0;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        WebView webView = (WebView) findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        //webView.getSettings().setBuiltInZoomControls(true);
        webView.loadDataWithBaseURL("http://test", "<script type='text/x-mathjax-config'>"
                              + "MathJax.Hub.Config({ " 
                              + "showMathMenu: false, "
                              + "jax: ['input/TeX','output/HTML-CSS'], " // output/SVG
                              + "extensions: ['tex2jax.js','toMathML.js'], " 
                              + "TeX: { extensions: ['AMSmath.js','AMSsymbols.js',"
                              + "'noErrors.js','noUndefined.js'] }, "
                              // + "'SVG' : { blacker: 30, "
                              // + "styles: { path: { 'shape-rendering': 'crispEdges' } } } "
                              + "});</script>"
                              + "<script type='text/javascript' "
                              + "src='file:///android_asset/MathJax/MathJax.js'"
                              + "></script>"
                              + "<span id='math'></span>","text/html","utf-8","");
        EditText edit = (EditText) findViewById(R.id.edit);
        edit.setBackgroundColor(Color.LTGRAY);
        edit.setTextColor(Color.BLACK);
        edit.setText("");
        Button btnShow = (Button) findViewById(R.id.btnShow);
        btnShow.setOnClickListener(this);
        Button btnClear = (Button) findViewById(R.id.btnClear);
        btnClear.setOnClickListener(this);
        Button btnExample = (Button) findViewById(R.id.btnExample);
        btnExample.setOnClickListener(this);
    }

    private String doubleEscapeTeX(String s) {
        String t="";
        for (int i=0; i < s.length(); i++) {
            if (s.charAt(i) == '\'') t += '\\';
            if (s.charAt(i) != '\n') t += s.charAt(i);
            if (s.charAt(i) == '\\') t += "\\";
        }
        return t;
    }

    private String getExample(int index) {
        return getResources().getStringArray(R.array.tex_examples)[index];
    }

    public void onClick(View v) {
        if (v == findViewById(R.id.btnShow)) {
            WebView webView = (WebView) findViewById(R.id.webview);
            EditText edit = (EditText) findViewById(R.id.edit);
            webView.loadUrl("javascript:document.getElementById('math').innerHTML='\\\\["
                            + doubleEscapeTeX(edit.getText().toString()) + "\\\\]';");
            webView.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
        }
        else if (v == findViewById(R.id.btnClear)) {
            WebView webView = (WebView) findViewById(R.id.webview);
            EditText edit = (EditText) findViewById(R.id.edit);
            edit.setText("");
            webView.loadUrl("javascript:document.getElementById('math').innerHTML='';");
        }
        else if (v == findViewById(R.id.btnExample)) {
            WebView webView = (WebView) findViewById(R.id.webview);
            EditText edit = (EditText) findViewById(R.id.edit);
            edit.setText(getExample(exampleIndex++));
            if (exampleIndex > getResources().getStringArray(R.array.tex_examples).length - 1) 
                exampleIndex=0;
            webView.loadUrl("javascript:document.getElementById('math').innerHTML='\\\\["
                            + doubleEscapeTeX(edit.getText().toString()) + "\\\\]';");
            webView.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
        }
    }

}

当我按下&#34;示例&#34;或者&#34; Show&#34;按钮,LogCat会发出错误:

I/chromium(1254): [INFO:CONSOLE(1)] "Uncaught TypeError: Cannot set property 'innerHTML' of null", source: http://test/ (1)
I/chromium(1254): [INFO:CONSOLE(1)] "Uncaught ReferenceError: MathJax is not defined", source: http://test/ (1)

我不知道如何解决这个问题,并希望有人帮助解决这个问题。感谢。

3 个答案:

答案 0 :(得分:6)

我也遇到了这个问题。

这是我的解决方案:

  1. 将您的基本网址从"http://test"更改为"http://test/"
  2. 将此代码webView.loadUrl(..)更改为webView.evaluateJavascript(..);。特别是对于我们想要加载innerHTML的代码。不要忘记添加anotation @TargetApi(Build.VERSION_CODES.KITKAT),因为它仅适用于Android 4.4及更高版本
  3. 永远不会将webView.loadWithBaseUrl(..)放在与webView.loadUrl(..)相同的流程中。因为如果在webView.loadUrl(..)完成之前加载了webView.loadWithBaseUrl(..),则会因上述OP而引发错误。
  4. 对于3号,您的代码已经符合此要求(因为在您的代码中,webView.loadUrl(..)执行已使用webView.loadWithBaseUrl(..)事件与OnClick分开。因此,请勿付款注意它。

    但是如果您的应用需要在一个事件中加载它们,请考虑使用以下代码将它们分开: `

    private void initiateWebView(){
    
        webViewEquationDisplay.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
    
                if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
                    loadUrlKitKat(equationSymbolFinal+equationToBeDisplayedFinal);
                }
                else{
                    webViewEquationDisplay.loadUrl("javascript:document.getElementById('math').innerHTML='<font color=\"yellow\">`"+equationToBeDisplayedFinal+"`</font>';");
                }
    
                webViewEquationDisplay.loadUrl("javascript:MathJax.Hub.Queue(['Typeset',MathJax.Hub]);");
            }
        });
    
        final String mathJaxOfflineUrl = "file:///android_asset/MathJax/MathJax.js";            
        webViewEquationDisplay.loadDataWithBaseURL("http://bar/", "<script type='text/x-mathjax-config'>"
                +"MathJax.Hub.Config({ " 
                    +"showMathMenu: false, "
                    +"jax: ['input/AsciiMath','output/HTML-CSS'], "
                    +"extensions: ['asciimath2jax.js'], " 
                    +"AsciiMath: { fixphi: true, useMathMLspacing: true, displaystyle: false, decimalsign: \".\" }, "
                  +"});</script>"
                +"<script type='text/javascript' "
                  +"src='"+mathJaxOfflineUrl+"'"
                  +"></script><span id='math'></span>","text/html","utf-8","");
    }
    
    
    @TargetApi(Build.VERSION_CODES.KITKAT)
    private void loadUrlKitKat(String param){
        webViewEquationDisplay.evaluateJavascript("javascript:document.getElementById('math').innerHTML='<font color=\"#97FD97\">`"+param+"`</font>';",null);
    }
    

    `

    祝你好运

答案 1 :(得分:1)

当我将不同的javascript函数从主页面移动到单独的.js文件时,我遇到了同样的问题。出于某种原因,Android无法从Java中找到外部加载的JavaScript webview函数 - 只能在主页面中找到它们。一旦我从JS文件中移回了函数,它立即开始工作。

尝试制作&#34;代理&#34;直接在主HTML中的这个函数:

function proxy() {
    call_some_other_function_from_JS_file();
}

这对我有用。我确定必须有办法找到这些功能,因为我在iOS上没有遇到这个问题。如果你知道更好的方法,有人请评论。

答案 2 :(得分:0)

webview.evaluateJavascript(&#34;的javascript:的document.getElementById(&#39;数学&#39)的innerHTML =&#39; "+doubleEscapeTeX(questn)+"&#39 ;;&#34;,null)的;

webview.loadUrl(&#34;的javascript:MathJax.Hub.Queue([&#39;排版&#39;,MathJax.Hub]);&#34);

这是api 19或以上的溶剂