Android Webview-本地javascript执行中未捕获的ReferenceError [英] Android Webview - Uncaught ReferenceError in local javascript execution

问题描述

大家好，谢谢您的帮助！

Hello everyone and thanks for your help!

我想构建一个Android Webview App，它使用HTML + CSS + javascript，除了highcharts之外，没有任何库.当我尝试使用服务器上的文件时，它在跨浏览器中的运行效果非常好.

I want to build a Android Webview App, it uses HTML + CSS + javascript with no library except the highcharts one. It works perfectly well cross-browser when I try it with the files on the server.

我希望有尽可能多的文件在本地客户端运行:HTML，CSS，所有资产(图像)和javascript代码都在应用程序中，而仅将php文件保留在服务器上(登录，登录等) ).

I want to have as many files as possible running locally client-side: the HTML, CSS, all assets (images) and javascript codes are in the app, leaving only the php files on the server (login, signin, etc.).

不幸的是，当我在Android上尝试我的应用程序时，我的javascript函数定义错误，例如: 12-27 10:04:42.075 17798-17798/com.wifcompanion.wifcompanion D/WiFCompanionConsole:未捕获的ReferenceError:未定义BodyReset-从file:///android_asset/wifmobile.html

Unfortunately, when I try my app on Android, I get errors on my javascript function defeinitions, for instance: 12-27 10:04:42.075 17798-17798/com.wifcompanion.wifcompanion D/WiFCompanionConsole: Uncaught ReferenceError: BodyReset is not defined -- From line 22 of file:///android_asset/wifmobile.html

我的第一个直觉是.js文件未正确加载.因此，我将所有js代码直接放在wifmobile.html中的标签下.无济于事.

My first intuition was that the .js files were not loaded properly. So I put all the js code directly under the tag in wifmobile.html. To no avail.

此外，似乎找到了一些函数(例如，当我单击首页登录按钮时，出现了NewSignIn())，而没有找到其他函数(例如，在NewSignIn()中调用的函数PopupSave(). ).

What's more, it seems some functions are found (for instance NewSignIn() when I click on the front-page login button), while others are not (for instance PopupSave(), which is a function called in NewSignIn()).

我可以在stackoverflow上找到最接近的问题，但没有任何答案: JavaScript无法与android WebView一起使用，Uncaught ReferenceError

The closest question I could find on stackoverflow is here, but does not have any answer: JavaScript not working with android WebView, Uncaught ReferenceError

package com.wifcompanion.wifcompanion;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.annotation.TargetApi;
import android.util.Log;
import android.webkit.ConsoleMessage;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
private WebView m_webview = null;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Load layout
    setContentView(R.layout.activity_main);

    // Create WebView
    m_webview = new WebView(this);

    // Add WebView to Activity
    m_webview = (WebView) findViewById(R.id.webviewWIF);
    m_webview.setWebChromeClient(new WebChromeClient());
    m_webview.loadUrl("file:///android_asset/wifmobile.html");

    //Logcat and console
    m_webview.setWebChromeClient(new WebChromeClient() {
        public boolean onConsoleMessage(ConsoleMessage cm) {
            Log.d("WiFCompanionConsole", cm.message() + " -- From line "
                    + cm.lineNumber() + " of "
                    + cm.sourceId() );
            return true;
        }
    });


    // Reload the old WebView content
    if (savedInstanceState != null) {
        m_webview.restoreState(savedInstanceState);
    }
    // Create the WebView
    else {
        m_webview.getSettings().setJavaScriptEnabled(true);
        int currentapiVersion = android.os.Build.VERSION.SDK_INT;
        if (currentapiVersion >= android.os.Build.VERSION_CODES.JELLY_BEAN) {
            fixNewAndroid(m_webview);
        }
    }
}

// Save the state of the web view when the screen is rotated.
@Override
protected void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);
    m_webview.saveState(outState);
}

@TargetApi(16)
protected void fixNewAndroid(WebView webView) {
    try {
        webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
    } catch (NullPointerException e) {
    }
}

}

<!DOCTYPE html>
<html>
<head>
<!-- Title -->
<title>World in Flames Companion</title>

<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="manifest.json">
<!-- icon -->
<link rel="icon" href="img/icon/favicon.ico" />
<link rel="icon" type="image/png" href="img/icon/wiflogo48.png" />
<!-- jQuery library -->
<!--<script src="js/jquery-1.11.1.min.js"></script>-->
<!-- Highharts -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- WIF scripts -->
<script src="solifnav.js"></script>
<script src="solif.js"></script>
<script src="soliffal.js"></script>
<script src="solifsetup.js"></script>
<script src="solifpartisans.js"></script> 
<script src="solifflow.js"></script>
<script src="solifcards.js"></script>
<script src="solifdiplo.js"></script>
<script src="solifbenefits.js"></script>
<script src="solifvichy.js"></script>
<script src="solifinternal.js"></script>
<script src="solifgamemanagement.js"></script>
<script src="solifbuild.js"></script>
<script src="solifhelper.js"></script>
<script src="solifdatabase.js"></script>
<script src="solifintel.js"></script>
<script src="solifstats.js"></script>
<script src="solifcivilwar.js"></script>
<script src="solifvp.js"></script>
<!-- Scenario specifics -->
<script src="solifscenario4.js"></script>
<!-- Stylehseet -->
<link rel="stylesheet" href="wifmobile.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Anton|Russo+One|Fanwood+Text|UnifrakturCook:700" rel="stylesheet">
</head>
<body onclick="BodyReset(event);" onkeydown="BodyKeydown(event);">
<!-- Login / registration / forgotpassword page-->                                      
<div id="signin">
<div class="banner"><img src="img/icon/wiflogo.png" style="max-width:75%;" /></div>
<div id="login">
<input type="text" name="login-username" id="login-username" placeholder="User name" autocomplete="username">
<input type="password" name="login-password" id="login-password" placeholder="Password" autocomplete="current-password">
<a onclick="NewSignIn();" id="NewSignInButton">Login</a>
<a onclick="GotoRegister();" class="things">&gt;&gt; Register</a>
<a onclick="GotoForgot();" class="things">&gt;&gt; Forgot your password?</a>
</div>
</div>
</body>
</html>`

推荐答案

这绝对是 javascript 代码中的错误.也就是说，由于我使用的是旧设备(平板电脑必须来自2010年初)，因此Webview不符合 Javascript ECMAScript 6 .相反，您应该确保代码符合 Javascript ECMAScript 5 .

This is definitely an error in the javascript code. Namely, as I'm using an old device (tablet must be from early 2010's), the webview is not compliant with Javascript ECMAScript 6. Instead, you should make sure your code is Javascript ECMAScript 5 compliant.

这包括(这些是我在代码中发现的主要错误):

This includes (those are the main errors I found in my code):

1)不要在函数中使用默认参数声明.代替:

1) Don't use default parameters declaration in functions. Instead of:

    function myFunction(myParam='hello'){
        ...
    }

使用:

    function myFunction(myParam){
        myParam=myParam || 'hello';
        ...
    }

2)您的函数不应与HTML中的ID具有相同的名称"(区分大小写).例如，不要这样做:

2) Your functions should not hold the same "name" (case-sensitive) as an id in your html. For instance don't do this:

    <a id="MyLink" onclick="MyLink();">My link</a>

但是要这样做:

    <a id="MyLink" onclick="myLink();">My link</a>

3)如果像我一样，您不是一个该死的专业人士，请准备测试您的代码的每一行，因为即使像console.clear()这样简单的东西也不符合要求.

3) If like me, you're not a damn pro, prepare to test every single line of your code, because even some things as simple as console.clear() weren't compliant.

当我发现一些更明显的错误时，我将对其进行编辑.

I will edit this post as I find some more obvious errors.

这篇关于Android Webview-本地javascript执行中未捕获的ReferenceError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！