问题
Hello everyone and thanks for your help!
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.
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.).
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
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.
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()).
The closest question I could find on stackoverflow is here, but does not have any answer: JavaScript not working with android WebView, Uncaught ReferenceError
MainActivity:
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) {
}
}
}
wifmobile.html
<!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">>> Register</a>
<a onclick="GotoForgot();" class="things">>> Forgot your password?</a>
</div>
</div>
</body>
</html>`
回答1:
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) Don't use default parameters declaration in functions. Instead of:
function myFunction(myParam='hello'){
...
}
Use:
function myFunction(myParam){
myParam=myParam || 'hello';
...
}
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>
But do this:
<a id="MyLink" onclick="myLink();">My link</a>
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.
来源：https://stackoverflow.com/questions/53942690/android-webview-uncaught-referenceerror-in-local-javascript-execution