WebView代码在Android 4.4.2（API 19）模拟器上生成Uncaught TypeError和Uncaught ReferenceError错误 [英] WebView code generating Uncaught TypeError and Uncaught ReferenceError errors on Android 4.4.2 (API 19) emulator

问题描述

在Android 4.4.2 KitKat（API 19）模拟器上运行时，我的代码出现问题...

I'm having a problem with my code when running on a Android 4.4.2 KitKat (API 19) emulator...

当我模仿我的项目时一个Android 4.3（API 18）模拟器，它正常工作并使用MathJax创建数学表达式：

When I emulate my project on a Android 4.3 (API 18) emulator, it works normally and creates the mathematical expressions with MathJax:

模拟器的图像

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

But when I use a Android 4.4.2 emulator, the app don't work correctly:

模拟器图片

以下是我项目的代码：

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

}

当我按示例或显示按钮，LogCat会发出错误：

When I press the "Example" or the "Show" button, LogCat emits the errors:

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)

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

I have no idea how to fix this problem, and would like somebody's help to solve this. Thanks.

推荐答案

我也遇到了这个问题。

I got this problem too.

这是我的解决方案：

1. 从<$ c更改基本网址$ c>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.loadWithBaseUrl（..）完成之前加载了 webView.loadUrl（..），它会引发上面提到的OP错误。

1. change your base URL from "http://test" to "http://test/"
2. change this code webView.loadUrl(..) to webView.evaluateJavascript(..);. Especially for code where we want to load innerHTML. Don't forget to add anotation @TargetApi(Build.VERSION_CODES.KITKAT) because it's only for Android 4.4 and above
3. never put webView.loadWithBaseUrl(..) in the same process with webView.loadUrl(..). Because If webView.loadUrl(..) was loaded before webView.loadWithBaseUrl(..) finished, it will raise error as OP stated above.

对于数字3，您的代码已经符合此要求（因为在您的代码中， webView.loadUrl（ ..）执行已经与 webView.loadWithBaseUrl（..）分开，使用 OnClick 事件。所以，不要注意它。

For number 3, your codes is already conform with this (because in your codes, webView.loadUrl(..) execution was already separated with webView.loadWithBaseUrl(..) by using OnClick event. So, don't pay attention to it.

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

But if your apps need to load them at one event, consider to separate them by using this code: `

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

`

祝你好运

这篇关于WebView代码在Android 4.4.2（API 19）模拟器上生成Uncaught TypeError和Uncaught ReferenceError错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！