Android WebView with HTML button and JavaScript

Question

In an Android app using a WebView, I need to load a simple HTML file that includes HTML buttons and JavaScript code that must be executed when the user clicks the buttons. After a lot of reading, I can get the HTML to load in the WebView, but I can't get the HTML buttons to execute any JavaScript code. Here is the code that I have written.

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>

No matter what JavaScript I put into the HTML button's onclick attribute, the WebView doesn't seem to execute it. I even tried: onclick="alert('Hello')" and still got nothing. What am I doing wrong?

A.D. · Accepted Answer · 2017-07-25 05:25:58Z

1

Please set up your webview settings before triggering loadUrl-method:

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

answered Jul 25, 2017 at 5:25

A.D.

1,4722 gold badges19 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barzee · Accepted Answer · 2017-07-24 19:54:21Z

0

Aargh! Stupid mistake in my JavaScript code. This line

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

should be

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

answered Jul 24, 2017 at 19:54

Barzee

9053 gold badges16 silver badges31 bronze badges

Collectives™ on Stack Overflow

Android WebView with HTML button and JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related