Stopping Android WebView from navigating

Question

Stopping Android WebView from navigating

Currently, I am working with Android version 5.0 and the latest update of the WebView component. My goal is to embed a remote website into a WebView without making any modifications to the source code of this website.

Here is the code snippet that I have implemented:

webView.setWebViewClient(new WebViewClient() {
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if(url.contains(URL_SERVLET)) {
            //Do nothing 
            Log.d("DEBUG", "load IMAGE");
            //view.stopLoading();
        } else {
            Log.d("DEBUG", "load URL into WebView");
            view.loadUrl(url);
        }
        return true;
    }
    // Called when all page resources loaded
    public void onPageFinished(WebView view, String url) {
        webView.setVisibility(View.VISIBLE);
        splashscreenLayout.setVisibility(View.GONE);
    }
});

The issue arises when I encounter a button on the website's side that triggers another URL to open in a popup using JavaScript. When I click on this button within the Android WebView, the new URL replaces the current one displayed in the WebView. However, my intention is to prevent any action when clicking on this button.

The current implementation successfully prevents loading the additional URL, but it leads to the WebView displaying a blank white screen.

I have attempted calling stopLoading() without success in resolving this problem. Additionally, reloading the WebView via webview.reload() isn't feasible since the remote website generates HTML pages dynamically upon requests.

Efforts to save and restore the state of the WebView have also proved ineffective.

Is there a method to block the transition to a new URL and maintain the WebView's display of the initial content without triggering a reload?

javascript android webview

Answer 1

Answer №1

If you're looking for a workaround to prevent page navigation in your WebView, one option is to implement a javascript solution that blocks any attempts to navigate away from the current page.

You can achieve this by incorporating the code snippet provided in this link.

var location = window.document.location;

var preventNavigation = function () {
    var originalHashValue = location.hash;

    window.setTimeout(function () {
        location.hash = 'preventNavigation' + ~~ (9999 * Math.random());
        location.hash = originalHashValue;
    }, 0);
};

window.addEventListener('beforeunload', preventNavigation, false);
window.addEventListener('unload', preventNavigation, false);

Alternatively, rather than blocking navigation entirely, you could simply disable the specific button causing the navigation issue using javascript.

To integrate this script into your WebView, you can refer to the guidance shared in this source.

WebView myWebView = (WebView) findViewById(R.id.webView);
WebSettings webSettings = myWebView.getSettings();

webSettings.setJavaScriptEnabled(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
myWebView.setWebViewClient(new WebViewClient() {
   @Override
   public boolean shouldOverrideUrlLoading(WebView view, String url) {
      return false;
   }

   @Override
   public void onPageFinished(WebView view, String url) {
      super.onPageFinished(view, url);

      injectScriptFile(view, "js/script.js"); // implementation below ...

      // check if the script was successfully loaded
      view.loadUrl("javascript:setTimeout(test(), 500)");
   }

   private void injectScriptFile(WevView view, String scriptFile) {
      InputStream input;
      try {
         input = getAssets().open(scriptFile);
         byte[] buffer = new byte[input.available()];
         input.read(buffer);
         input.close();

         // Encode script byte-array using BASE64 encoding
         String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
         view.loadUrl("javascript:(function() {" +
                      "var parent = document.getElementsByTagName('head').item(0);" +
                      "var script = document.createElement('script');" +
                      "script.type = 'text/javascript';" +
         // Ensure the browser decodes the string as script content
                      "script.innerHTML = window.atob('" + encoded + "');" +
                      "parent.appendChild(script)" +
                      "})()");
      } catch (IOException e) {
         // Handle exceptions
         e.printStackTrace();
      }
   }
});

myWebView.loadUrl("http://www.example.com");

Answer 2

If you're looking for a workaround to prevent page navigation in your WebView, one option is to implement a javascript solution that blocks any attempts to navigate away from the current page.

You can achieve this by incorporating the code snippet provided in this link.

var location = window.document.location;

var preventNavigation = function () {
    var originalHashValue = location.hash;

    window.setTimeout(function () {
        location.hash = 'preventNavigation' + ~~ (9999 * Math.random());
        location.hash = originalHashValue;
    }, 0);
};

window.addEventListener('beforeunload', preventNavigation, false);
window.addEventListener('unload', preventNavigation, false);

Alternatively, rather than blocking navigation entirely, you could simply disable the specific button causing the navigation issue using javascript.

To integrate this script into your WebView, you can refer to the guidance shared in this source.

WebView myWebView = (WebView) findViewById(R.id.webView);
WebSettings webSettings = myWebView.getSettings();

webSettings.setJavaScriptEnabled(true);
webSettings.setAllowUniversalAccessFromFileURLs(true);
myWebView.setWebViewClient(new WebViewClient() {
   @Override
   public boolean shouldOverrideUrlLoading(WebView view, String url) {
      return false;
   }

   @Override
   public void onPageFinished(WebView view, String url) {
      super.onPageFinished(view, url);

      injectScriptFile(view, "js/script.js"); // implementation below ...

      // check if the script was successfully loaded
      view.loadUrl("javascript:setTimeout(test(), 500)");
   }

   private void injectScriptFile(WevView view, String scriptFile) {
      InputStream input;
      try {
         input = getAssets().open(scriptFile);
         byte[] buffer = new byte[input.available()];
         input.read(buffer);
         input.close();

         // Encode script byte-array using BASE64 encoding
         String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
         view.loadUrl("javascript:(function() {" +
                      "var parent = document.getElementsByTagName('head').item(0);" +
                      "var script = document.createElement('script');" +
                      "script.type = 'text/javascript';" +
         // Ensure the browser decodes the string as script content
                      "script.innerHTML = window.atob('" + encoded + "');" +
                      "parent.appendChild(script)" +
                      "})()");
      } catch (IOException e) {
         // Handle exceptions
         e.printStackTrace();
      }
   }
});

myWebView.loadUrl("http://www.example.com");

Stopping Android WebView from navigating

Answer №1

Similar questions

Tips for saving collections of boolean values in Realm on Android?

In Android Studio, the RecyclerView is failing to refresh when onRefresh is triggered

Utilize the composite primary key of an Entity within Typeorm for efficient data retrieval

What is the mechanism for invoking functions defined with the arrow syntax in Angular?

Cannot retrieve top 2 values from an object - Angular 6 bug fixing issue

using numerous if statements in ng-class

Produce an additional page while remaining on the present one

Unable to invoke .then when simulating axios call within componentDidMount

node-fetch fails to catch HTTP errors

Force Layout - Labeling and anchoring the nodes

In Android Java, the AlertDialog pops up before the thread's methods have completed their execution

Troubleshooting: Why the TableTools basic usage example is not functioning as

There seems to be a contradiction in my code - I am returning a Promise but TypeScript is throwing an error saying that the

Converting Java password encryption technique into a JavaScript version

Issue with Vue mounting causing component to not receive updated values

What is the right way to display accurate value with JSON.parse()?

Transferring Composite Data Structures from JavaScript to a WCF RESTful Service

Executing the command causes an error when res.download() is called, resulting in a request

Element UI: Triggering an event when the sort caret is clicked

What advantages can be gained by substituting a 'single-use' function with a property or object?