Prevent Android WebView from attempting to fetch or capture resources such as CSS when using loadData() method

Question

Prevent Android WebView from attempting to fetch or capture resources such as CSS when using loadData() method

Context

To many, this situation might appear to be repetitive. However, I assure you that it is not.

My objective is to import html data into a WebView, while being able to intercept user hyperlink requests. During this process, I came across this helpful answer which fulfills my requirements, except for capturing requests for items like CSS files and images:

// Notify the webclient when a url is about to load
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request){
    return true;
}
// Perform an action when the desired URL is ready to load
@Override
public void onLoadResource(WebView view, String url){
    if( url.equals("http://cnn.com") ){
        // Customize behavior accordingly
    }
}

I have disabled automatic image loading, network loads, and execution of Javascript:

settings.setBlockNetworkLoads(true);
settings.setBlockNetworkImage(true);
settings.setJavaScriptEnabled(false);

However, these adjustments do not prevent the capture of the mentioned requests.

Perhaps there is an alternate approach to intercepting link clicks, but the only options seem to be either this method or halting external resource loading altogether.

Query

Is there a way to stop WebView from capturing (or trying to load) resource requests such as CSS, JS, or images?

If preventing capture or loading is not possible, how can I distinguish between clicked links and web resources?

Thank you in advance!

javascript android html css webview

Answer 1

Answer №1

To modify the behavior of WebViewClient's shouldInterceptRequest, you can create a custom response instead of fetching CSS, JS, images, etc.

For example:

    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
        Log.d(TAG, "shouldInterceptRequest: " + url);

        if (url.contains(".css")
                || url.contains(".js")
                || url.contains(".ico")) { // add other specific resources..
            return new WebResourceResponse(
                    "text/css",
                    "UTF-8",
                    getActivity().getResources().openRawResource(R.raw.some_css));
        } else {
            return super.shouldInterceptRequest(view, url);
        }
    }

Here, R.raw.some_css contains:

    body {
      font-family: sans-serif;
    }

Please note:
Depending on the pages you are loading, this method might affect the page's appearance.

Answer 2

To modify the behavior of WebViewClient's shouldInterceptRequest, you can create a custom response instead of fetching CSS, JS, images, etc.

For example:

    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
        Log.d(TAG, "shouldInterceptRequest: " + url);

        if (url.contains(".css")
                || url.contains(".js")
                || url.contains(".ico")) { // add other specific resources..
            return new WebResourceResponse(
                    "text/css",
                    "UTF-8",
                    getActivity().getResources().openRawResource(R.raw.some_css));
        } else {
            return super.shouldInterceptRequest(view, url);
        }
    }

Here, R.raw.some_css contains:

    body {
      font-family: sans-serif;
    }

Please note:
Depending on the pages you are loading, this method might affect the page's appearance.

Answer 3

Answer №2

The answer is simple - it's not possible to do so.

Here's a more detailed explanation: the reason you can't achieve this is because web requests are designed to either capture everything or nothing at all. They are a broad concept that is not specific to individual resources like images or CSS files, meaning they don't recognize what those are. That's why your search for them comes up empty.

To work around this limitation, you can modify your approach by implementing logic in the shouldOverrideUrlLoading method. Instead of always returning true, only return true for URLs that you want to handle manually. For other types of requests such as CSS and JavaScript, return false so that the WebView will manage them on its own.

Here's an example:

@Override
public boolean shouldOverrideUrlLoading(WebView view, String  url) {
    // Skip handling CSS and JS files
    if (url.endsWith(".css") || url.endsWith(".js")) {
        return false;
    }

    return true;
}

Answer 4

The answer is simple - it's not possible to do so.

Here's a more detailed explanation: the reason you can't achieve this is because web requests are designed to either capture everything or nothing at all. They are a broad concept that is not specific to individual resources like images or CSS files, meaning they don't recognize what those are. That's why your search for them comes up empty.

To work around this limitation, you can modify your approach by implementing logic in the shouldOverrideUrlLoading method. Instead of always returning true, only return true for URLs that you want to handle manually. For other types of requests such as CSS and JavaScript, return false so that the WebView will manage them on its own.

Here's an example:

@Override
public boolean shouldOverrideUrlLoading(WebView view, String  url) {
    // Skip handling CSS and JS files
    if (url.endsWith(".css") || url.endsWith(".js")) {
        return false;
    }

    return true;
}

Answer 5

Answer №3

Discovering a method to disregard automated WebView resource requests has been successful.

By filtering out requests within the initial second of WebView initialization, I can separate user-generated clicks from other interactions:

final Long time = System.currentTimeMillis()/1000;

// Set up a WebView and establish a WebViewClient for tracking link clicks
WebView webview = new WebView(this);
WebViewClient webviewClient = new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request){
        return true;
    }

    @Override
    public void onLoadResource(WebView view, String url){
        Long currentTime = System.currentTimeMillis()/1000;
        if (currentTime - time > 1) {
            // Implement actions here
        }
    }
};

Although untested without affecting JavaScript execution and automatic image loading, this solution is expected to function correctly:

WebSettings settings = webview.getSettings();
settings.setBlockNetworkLoads(true);
settings.setBlockNetworkImage(true);
settings.setJavaScriptEnabled(false);

Answer 6

Discovering a method to disregard automated WebView resource requests has been successful.

By filtering out requests within the initial second of WebView initialization, I can separate user-generated clicks from other interactions:

final Long time = System.currentTimeMillis()/1000;

// Set up a WebView and establish a WebViewClient for tracking link clicks
WebView webview = new WebView(this);
WebViewClient webviewClient = new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request){
        return true;
    }

    @Override
    public void onLoadResource(WebView view, String url){
        Long currentTime = System.currentTimeMillis()/1000;
        if (currentTime - time > 1) {
            // Implement actions here
        }
    }
};

Although untested without affecting JavaScript execution and automatic image loading, this solution is expected to function correctly:

WebSettings settings = webview.getSettings();
settings.setBlockNetworkLoads(true);
settings.setBlockNetworkImage(true);
settings.setJavaScriptEnabled(false);

Prevent Android WebView from attempting to fetch or capture resources such as CSS when using loadData() method

Context

Query

Answer №1

Answer №2

Answer №3

Similar questions

Performing multiple ajax calls simultaneously in JavaScript using the React framework

Is there a way to create a 100% height effect using divs instead of tables exclusively with CSS?

Begin a SeleniumWebDriver session after Google Chrome has been launched beforehand

Babel had a SyntaxError in test.jsx file at line 3, position 11 with an Unexpected token

Is there a way for me to prevent a particular file from being cached by web browsers?

Is it possible to include a JavaScript script in a Laravel Blade file?

The PHP script receives an empty string value passed from JavaScript

What are the methods for detecting a change in a variable's value in JavaScript?

Node.js error message: Unable to load HTTP module

Guide on reusing javascript to toggle between image sources

step by step guide on swapping a portion of a JSON string

How to Link Laravel 5 with Ajax?

Obtain value of dropdown selection upon change

Extract the body.req object within a loop in a Node.js application

The 'palette' property is not found on the Type 'Theme' within the MUI Property

Display the progress bar's completion percentage during animation

Determine if an object hierarchy possesses a specified attribute

How does the Cluster module in Node.js compare to the Cluster module in Learnboost?

Removing gaps around rounded corners in jQuery UI accordions is a common issue that often arises when styling web elements

What is the best way in Angular to focus on an input field using its name, model, or id?