带有 HTML 按钮和 JavaScript 的 Android WebView答案

【问题标题】：Android WebView with HTML button and JavaScript带有 HTML 按钮和 JavaScript 的 Android WebView
【发布时间】：2017-07-24 19:40:48
【问题描述】：

在使用 WebView 的 Android 应用程序中，我需要加载一个简单的 HTML 文件，其中包括 HTML 按钮和 JavaScript 代码，当用户单击按钮时必须执行这些代码。经过大量阅读，我可以让 HTML 加载到 WebView 中，但我无法让 HTML 按钮执行任何 JavaScript 代码。这是我写的代码。

main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="edu.byui.cit360.webviewwithjs.MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</FrameLayout>

MainActivity.java

package edu.byui.cit360.webviewwithjs;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);

        WebView view = (WebView)findViewById(R.id.webview);
        view.loadUrl("file:///android_asset/first.html");
        WebSettings settings = view.getSettings();
        settings.setJavaScriptEnabled(true);
    }
}

first.html

<!DOCTYPE HTML>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Fuel Efficiency</title>
    <script>
        function mpg() {
            var dist = parseFloat(document.getElementById('distance').value);
            var vol = parseFloat(document.getElementById('volume').value);
            var mpg = dist / vol;
            document.getElementById('volume').innerHTML = mpg;
        }
    </script>
</head>
<body>
    <h3>Fuel Efficiency</h3>
    Distance <input type="number" id="distance" size="4"><br>
    Volume <input type="number" id="volume" size="4"><br>
    <button type="button" onclick="mpg();">Fuel Efficiency</button>
    <div id="output"></div>
</body>
</html>

无论我在 HTML 按钮的 onclick 属性中添加了什么 JavaScript，WebView 似乎都不会执行它。我什至尝试过： onclick="alert('Hello')" 仍然一无所获。我做错了什么？

【问题讨论】：

标签： javascript android html webview

【解决方案1】：

请在触发 loadUrl-method 之前设置您的 webview 设置：

    WebView view =(WebView)findViewById(R.id.webview);
    WebSettings settings = view.getSettings();
    settings.setJavaScriptEnabled(true);
    view.loadUrl("file:///android_asset/first.html");

【讨论】：

【解决方案2】：

啊！我的 JavaScript 代码中的愚蠢错误。这一行

document.getElementById('volume').innerHTML = mpg;

应该是

document.getElementById('output').innerHTML = mpg;

【讨论】：