What Dom Events Are Available to Webkit on Android

What DOM events are available to WebKit on Android?

OK, this is interesting. My use case is that I have a series of links (A tags) on a screen in a WebKit view. To test what events area available, using jQuery 1.3.1, I attached every event listed on this page (even ones that don't make sense) to the links then used the up, down, and enter controls on the Android emulator and noted which events fired in which circumstances.

Here is the code I used to attach the events, with results to follow. Note, I'm using "live" event binding because for my application, the A tags are inserted dynamically.

$.each([
    'blur',
    'change',
    'click',
    'contextmenu',
    'copy',
    'cut',
    'dblclick',
    'error',
    'focus',
    'keydown',
    'keypress',
    'keyup',
    'mousedown',
    'mousemove',
    'mouseout',
    'mouseover',
    'mouseup',
    'mousewheel',
    'paste',
    'reset',
    'resize',
    'scroll',
    'select',
    'submit',

    // W3C events
    'DOMActivate',
    'DOMAttrModified',
    'DOMCharacterDataModified',
    'DOMFocusIn',
    'DOMFocusOut',
    'DOMMouseScroll',
    'DOMNodeInserted',
    'DOMNodeRemoved',
    'DOMSubtreeModified',
    'textInput',

    // Microsoft events
    'activate',
    'beforecopy',
    'beforecut',
    'beforepaste',
    'deactivate',
    'focusin',
    'focusout',
    'hashchange',
    'mouseenter',
    'mouseleave'
], function () {
    $('a').live(this, function (evt) {
        alert(evt.type);
    });
});

Here's how it shook out:

• On first page load with nothing highlighted (no ugly orange selection box around any item), using down button to select the first item, the following events fired (in order): mouseover, mouseenter, mousemove, DOMFocusIn

• With an item selected, moving to the next item using the down button, the following events fired (in order): mouseout, mouseover, mousemove, DOMFocusOut, DOMFocusIn

• With an item selected, clicking the "enter" button, the following events fired (in order): mousemove, mousedown, DOMFocusOut, mouseup, click, DOMActivate

This strikes me as a bunch of random garbage. And, who's that cheeky IE-only event (mouseenter) making a cameo, then taking the rest of the day off? Oh well, at least now I know what events to watch for.

It would be great if others want to take my test code and do a more thorough run through, perhaps using form elements, images, etc.

Is it possible to receive tilt events in JavaScript on mobile Webkit for iOS or Android phones?

You are looking for HTML5 DeviceOrientation and DeviceMotion events. Most modern smartphone browsers support these events now.

Here is a useful tutorial:
http://www.html5rocks.com/en/tutorials/device/orientation/

How to fire javascript event in Android WebView on app resume

You can do this using the WebView evaluateJavascript() method.

First of all you need to create an event in your webpage javascript, and add the event handler:

window.appResumeEvent = new Event('appresume');

window.addEventListener('appresume', yourFunction, false);

function yourFunction() {…}

It's important that you set create the app resume event in global scope (which can be achieved by setting it as a property of the window).

Now, in your Android onResume() method, run the evaluateJavascript() method:

@Override
protected void onResume() {
    super.onResume();
    mainWebView.evaluateJavascript("(function() { window.dispatchEvent(appResumeEvent); })();", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {

        }
    });
}

Note the javascript has to be wrapped in an immediately-invoked function expression. Also note dispatchEvent() takes the event variable as the argument, not the event name string.

More info: Creating and dispatching events in javascript (MDN)

For my full MainActivity.java click show snippet:

import android.webkit.WebSettings;import android.webkit.WebView;import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
    private WebView mainWebView;
    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);
        mainWebView = findViewById(R.id.activity_main_webview);        mainWebView.setWebViewClient(new WebViewClient());        WebSettings webSettings = mainWebView.getSettings();        webSettings.setJavaScriptEnabled(true);
        mainWebView.loadUrl("file:///android_asset/www/index.html");    }
    @Override    protected void onResume() {        super.onResume();        mainWebView.evaluateJavascript("(function() { window.dispatchEvent(appResumeEvent); })();", new ValueCallback<String>() {            @Override            public void onReceiveValue(String value) {
            }        });    }}

Catch D-Pad/Trackball Events in Android Web App

Simply 'catch' the keypresses on the WebView by using View.setOnKeyListener() to handle the KeyEvents.

public void setOnKeyListener (View.OnKeyListener l)

Register a callback to be invoked when a key is pressed in this view.

In your example that would be used like this:

thewebview.setOnKeyListener(new OnKeyListener()
{
    @Override
    public boolean onKey(View v, int keyCode, KeyEvent event)
    {
        // do your stuff here
    }
});

Android browser Javascript events when minimised

can only native apps runs in
background?

Certainly, I would not expect the browser to be waking up the device, for your sleep mode scenario. Apparently, based on your symptoms, they pause all Javascript threads when the browser itself is paused. That is not terribly shocking, given the battery problems that leaving those scripts running might cause.

What event fires when a WebKit WebApp is terminated

You can use the "pageshow" event to detect when the app has resumed. This event will fire when user returns to your app from a different safari tab. It will also fire when user clicks the home button and then comes back to the app by clicking on safari button

     <script>
    window.addEventListener("pageshow", function(){
        alert("page shown");
    }, false);
  </script>

I have tested this on the iOS simulator and its working as I described above.

How to get touch event information in android webView?

I figured out that the webView has a function called setOnTouchListener where I have to add the logic:

import android.annotation.SuppressLint;
import android.content.Intent;
import android.os.Message;
import android.webkit.URLUtil;
import android.net.Uri;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.os.Handler;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.webkit.WebResourceRequest;
import android.webkit.WebResourceResponse;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.WebChromeClient;
import android.widget.Button;
import android.util.Log;

/**
 * An example full-screen activity that shows and hides the system UI (i.e.
 * status bar and navigation/system bar) with user interaction.
 */
public class FullscreenActivity extends AppCompatActivity
{
    private WebView webView;
    private Button backButton;
    private String website;

    ...

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

        website = "https://www.example.com";
        setContentView(R.layout.activity_fullscreen);
        webView = findViewById(R.id.webView);
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);

        webView.setWebViewClient(new WebViewClient() {

        webView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {

                int x = (int) event.getX();
                int y = (int) event.getY();

                Log.i("debug_log", "moving: (" + x + ", " + y + ")");

                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        Log.i("debug_log", "touched down");
                        break;
                    case MotionEvent.ACTION_MOVE:
                        Log.i("debug_log", "moving: (" + x + ", " + y + ")");
                        break;
                    case MotionEvent.ACTION_UP:
                        Log.i("debug_log", "touched up");
                        break;
                }

                return false;
            }
        });

        // URL laden:
        webView.loadUrl(website);
    }

    ...

---

Related Topics