Determining the completion of loading in Android WebView

I am seeking to understand how to accurately determine when a WebView has finished loading in its entirety.

To clarify what is meant by "completely":

  • All redirects have been processed
  • The entire page is visibly displayed, with no additional elements left to load

Inappropriate solutions to this issue include:

WebViewClient.onPageFinished() - triggers multiple times during redirect processes and before the full display of the page.

PictureListener.onNewPicture() - fires whenever there are screen changes or redirects, making it difficult to pinpoint the final trigger.

WebChromeClient.onProgressChanged()
- faces the same challenges as onPageFinished. (Suggested by David)

Thread.sleep(5000) - obviously not a suitable solution due to its interference with the loading process.

An optimal solution would involve cleverly combining the above methods in a way that effectively determines complete page loading.

Why do I aim to acquire this knowledge? Because I intend to inject specific javascript code once into the webview after it has fully loaded.

javascriptandroidwebview

Answer №1

Special thanks go out to David Caunt for the brilliant suggestion of examining the response headers.

I have come across a method that has proven to be quite effective:

Rather than relying on webview to handle HTTP requests, take matters into your own hands so you can verify the HTTP status codes for redirects. Follow the chain of redirections carefully. Once you reach a request that is not a redirect, set a flag and transmit the data to the webview using webview.loadDataWithBaseURL. The flag will be monitored in WebViewClient.onPageFinished() to ensure all redirects have been processed. At this point, Javascript can be injected. It's worth noting that the page itself may perform some Javascript manipulation during this stage, making it challenging to determine when to execute the code. Adding a slight delay (e.g. 500ms) to the Javascript allows the DOM to stabilize before running the script. Use 

setTimeout(function(){/* your code */}, 500)
.

Answer №2

Have you considered implementing your custom WebChromeClient?

It seems like onProgressUpdated could notify you when a page is completely loaded.

This method seems to be utilized by Android's default browser.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Running intricate javascript/jquery/json code using an html checkbox

Hey there, I'm hoping this issue is simpler than I'm making it out to be... So, I've got this pretty complex JSON/jQuery function (3000 lines long) that builds a DOM tree in a separate JS file. This JS file also contains a bunch of other on ...

javascriptjqueryhtmljson

Tips for preserving the contents of a list with HTML and Javascript

My latest project involves creating a website with a To-Do list feature. Users should be able to add and delete items from the list, which I achieved using JavaScript. Now, my next goal is to ensure that the current items on the list are saved when the pag ...

javascripthtmlcss

Ways to confirm the existence of local storage in Vue.js data

Recently, I created a to-do list using Vue js and localstorage(LS). Everything was working fine until I tried to run it on a different browser where LS is not allowed. An error popped up saying Cannot read property 'items' of null". The issu ...

javascriptvue.jsvuejs2

After a full day has passed, remove nodes from the Firebase database

Upon initializing my server, I populate Firebase with seed data. In the 24 hours that follow, users contribute additional data, but after this time period elapses, I aim to purge all user data while retaining the original seed information. What is the opt ...

javascriptjsonnode.jsfirebasefirebase-realtime-database

Is it possible for AngularJS to share a service among multiple ng-apps?

I've been working on developing a web app that involves multiple Angular ng-apps, and I want to use the same service code for at least two of them (even though they don't share data but perform similar functions). How can I prevent code duplicati ...

javascriptangularjs

A coding algorithm for determining text similarity percentage by calculating the edit distance

I have a good understanding of various edit-distance algorithms in JavaScript, but my goal is to calculate text similarity as a percentage based on them. Can anyone provide guidance on how to implement this feature? ...

javascripttextsimilarity

What is the best way to ensure that messages stay saved in my app for an extended

I am looking for a way to store messages sent through my small messaging app in a persistent manner. Currently, the messages are transferred from the front-end to a Node, Socket.io, and Express back-end. A friend recommended using Enmaps (), but unfortuna ...

javascriptnode.jsexpresssocket.iolocal-storage

What steps should I take to incorporate a timer into my bot similar to the timer used by other giveaway bots

I am looking to add a timer to my bot giveaway embed message that continues to update itself even when the bot is offline, without showing that the message was edited. Here's what I currently have in my embed: const embed = new MessageEmbed(); ...

javascriptnode.jsdiscord.js

The functionality of tinymce setContent can only be activated by directly clicking on it

Everything is running smoothly with the code below: $('.atitle').on('click', function(){ console.log('323'); tinymce.get("ed").setContent("<p>lorem ipsum</p>"); // it's working ...

javascriptjquerytinymce

What could be the reason why both the add and remove functions are unable to work simultaneously within a JavaScript function?

Hi there! I recently started diving into JavaScript and encountered a little hiccup. I've been working on a dice game where images change randomly whenever a button is clicked. The images transition from one to another, but I wanted to add a rolling ...

javascripthtmlcsscss-transitions

Hiding a column in jQuery DataTables

Can the jquery datatables plugin be used to easily hide and show a table column? I've successfully refreshed the table data by using fnClearTable and fnAddData. However, I'm facing a challenge in one of my table views where I need to hide certa ...

javascriptjquerydatatables

The size of my React Native app is significantly larger than expected once installed

I recently developed a React Native app, and while the release APK size is only 28 MBs, I was shocked to see that the storage size is a whopping 62 MBs. I am desperately looking for a solution as I need to deliver this project soon. Please help me resolv ...

javascriptandroidreactjsreact-native

What is causing onbeforeunload to consistently display a dialog box?

I'm facing an issue where my javascript code displays a confirmation dialog even when there is no unsaved data. I have simplified the problem to this bare minimum: window.addEventListener("beforeunload", (e) => { e.returnValue = null; retu ...

javascripthtml

Is jQuery('#id') equivalent to using document.getElementById('id') in JavaScript?

Similar Question: document.getElementById vs jQuery I've written a function that removes a specific class ("orange") from all spans with the class "jobStatus". It works perfectly when called from a SELECT onchange event (onchange="chgJobstatus(th ...

javascriptjquery

Tips for updating JS and CSS links for static site deployment

As I develop my static site using HTML files served from a simple web server, I want to use local, non-minified versions of Javascript code and CSS files. However, when it comes time to deploy the site, I would like to refer to minified versions of these s ...

javascripthtmlcssclient-sidestatic-html

Is it possible to call a ref from a different component in React?

I'm currently working on a React chat application and I want the input field where messages are entered to be focused every time you click on the chat box. However, the challenge I'm facing is that the chat box in the main component is separate ...

javascriptreactjs

Issue with Tooltip Position when Scrolling Sidebar is causing display problems

My goal is to create a Sidebar with Tooltip attached to its <li> elements similar to this example: Screenshot - Good Tooltip However, I am facing an issue where the position of the Tooltip breaks when scrolling to the bottom of the sidebar, causing ...

javascripthtmlcss

Accessing Next and Previous Elements Dynamically in TypeScript from a Dictionary or Array

I am new to Angular and currently working on an Angular 5 application. I have a task that involves retrieving the next or previous item from a dictionary (model) for navigation purposes. After researching several articles, I have devised the following solu ...

javascriptangulartypescript

Can you explain the function of mdLiveAnnouncer in Angular Material and how it operates?

Could someone provide an explanation of $mdLiveAnnouncer using this code snippet? module.controller('AppCtrl', function($mdLiveAnnouncer) { // Making a basic announcement (Polite Mode) $mdLiveAnnouncer.announce('Hey Google'); // ...

javascripthtmlcssangularjsangular-material

Encountering a problem with configuring webpack's CommonsChunkPlugin for multiple entry points

entry: { page1: '~/page1', page2: '~/page2', page3: '~/page3', lib: ['date-fns', 'lodash'], vendor: ['vue', 'vuex', 'vue-router'] }, new webpack.optimize.C ...

javascriptwebpackvue.jscommonschunkplugin