Android Question WebView: catch clicking the href of a DOM-element

peacemaker · Apr 20, 2024

HI, All

I know nothing about JS.
A web-page is so:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title</title>

<link href="https://domain/app.css" rel="stylesheet">

</head>

<body>

<div id="user">
</div>

<script src="https://domain/js/app.js" defer></script>
</body>
</html>

No visible HTML-buttons with href-links to be catched.

Buttons are in DOM:

_OverrideUrl and _ShouldInterceptRequest events are not fired if to click.

Is it possible to catch clicking such buttons in WebView?

JohnC · Apr 20, 2024

OK, this issue is kind of complex, so ChatGPT may be off the mark, but it may at least help get to a solution...

Note: You will probably need to change the selector name of 'Button' to the name of the react buttons you are trying to hook into (which is class dependent).

Step-by-Step Implementation

1. Add WebViewExtras Library

First, ensure you have added the WebViewExtras library to your project. If not, you can download it from the B4A libraries repository and add it to your libraries in the IDE.

2. Initialize WebView and WebViewExtras

You will need to initialize both WebView and WebViewExtras in your B4A project. Set up your activity to include the WebView and apply the necessary settings:

B4X:

Sub Process_Globals
    Public WebView1 As WebView
    Public WebViewExtras1 As WebViewExtras
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout1") ' Assuming the layout file with WebView is named Layout1
    WebView1.Initialize("WebView1")
    WebViewExtras1.Initialize(WebView1)
    WebView1.JavaScriptEnabled = True
    WebView1.LoadUrl("https://yourwebsite.com") ' Load your URL
    AddJavaScriptInterface()
End Sub

Sub AddJavaScriptInterface()
    WebViewExtras1.addJavascriptInterface(JsBridge, "Android") ' This is assuming you've set up a JsBridge as previously described
End Sub

3. Inject JavaScript Using ExecuteJavaScript

After your page loads, you might want to inject JavaScript to add event listeners to your page. You can use ExecuteJavaScript from WebViewExtras for this purpose. Assume you want to add a click listener to a button as soon as the page is fully loaded:

B4X:

Sub WebView1_PageFinished (Url As String)
    ' This JavaScript snippet finds a button by a selector and adds a click event listener
    ' Replace 'button' with a more specific selector if necessary
    Dim js As String
    js = "document.querySelector('button').addEventListener('click', function() { Android.buttonClicked('Clicked'); })"
    WebViewExtras1.ExecuteJavascript(js)
End Sub

Sub JsBridge_buttonClicked(data As String)
    Log("Button click event received: " & data)
End Sub

Note:

Security Considerations: When using JavaScript interfaces, be careful about exposing methods to JavaScript. It can pose security risks if not handled carefully.
Selector Specificity: Make sure that the JavaScript selector you use in ExecuteJavaScript accurately targets the button or element you are interested in. This might require more specific CSS selectors depending on the structure of the HTML.

This setup allows you to interact with JavaScript within your WebView using B4A's WebViewExtras library, enabling you to handle events and integrate more deeply with the webpage content.

Android Question WebView: catch clicking the href of a DOM-element

peacemaker

Expert

JohnC

Expert

Step-by-Step Implementation

1. Add WebViewExtras Library

2. Initialize WebView and WebViewExtras

3. Inject JavaScript Using ExecuteJavaScript

Note:

Similar Threads

Android Question WebView: catch clicking the href of a DOM-element

peacemaker

Expert

JohnC

Expert

Step-by-Step Implementation​

1. Add WebViewExtras Library​

2. Initialize WebView and WebViewExtras​

3. Inject JavaScript Using ExecuteJavaScript​

Note:​

Similar Threads

Step-by-Step Implementation

1. Add WebViewExtras Library

2. Initialize WebView and WebViewExtras

3. Inject JavaScript Using ExecuteJavaScript

Note: