What to do when encountering a problem with HTML, CSS, and JS while loading a webpage from an SD card to a WebView

I am facing an issue while loading an HTML file from the SD card to a webview. The problem is that the CSS, images, and videos are not loading properly in the webview.

Compatible with Android 4.4 KitKat and Chrome version
Not compatible with versions below 4.4 KitKat

I have tried both methods of directly passing the URL in loadUrl and using loadDatawithBaseurl, but none of them seem to work correctly for me.

mWebview=(WebView)findViewById(R.id.webview);
mWebview.getSettings().setJavaScriptEnabled(true);
mWebview.setWebChromeClient(new WebChromeClient());
mWebview.setWebViewClient(new WebViewClient());
mWebview.loadUrl("file:///storage/emulated/0/13119/news66.html");

I also attempted the following:

data=getHTMLDataBuffer("file:///storage/emulated/0/13119/news66.html");
mWebview.loadDataWithBaseURL("file://"+Environment.getExternalStorageDirectory().getAbsolutePath().toString()+"/13119/",data,"text/html","UTF-8", null);

Chrome ScreenShot

Webview ScreenShot

javascriptandroidhtmlcssstorage

Answer №1

Seems like there may be an issue with media not loading on your webpage.

Suggestions to try:

  • Ensure internet permission is added for your app, as the media might be failing to load due to lack of internet permission in the webview (which could explain why it works in Chrome).

  • Check if this issue occurs with all HTML files, as there are newer standards that the webview may not support but Chrome does, potentially causing the problem.

  • Attempt to open your HTML file in a different browser to see if it loads without any issues.

  • If possible, upload your HTML file (zipped) for further analysis.

UPDATE: Upon reviewing your HTML code, I noticed the following in news66:

body { margin:0;background: url("TS-INFO-16-9-HD.png") no-repeat scroll center center / 1920px 100% rgba(0, 0, 0, 0); height:100% important; overflow:hidden; }

Recommendation:

body { margin:0;background: url("TS-INFO-16-9-HD.png") no-repeat scroll center center; height: 100%; }

After making this adjustment, the media should load properly. Similar changes may be needed for other sections as well.

Answer №2

It is possible that the issue lies in the size of your background image or its compatibility with the "not supporting" type. While your Chrome browser may have all necessary settings configured for webview, your actual webview may not.

webView = (WebView) findViewById(R.id.webView1);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(false);
webView.getSettings().setPluginsEnabled(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.setHorizontalScrollBarEnabled(false);
webView.getSettings().setDomStorageEnabled(true);

Research further on setting up webviews to optimize the rendering process. There are additional functions you can explore and implement.

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

Combining objects in JavaScript

I am currently working on converting the object received from the server into a format compatible with the backend system. I have a received object that looks like this { 'User.permissions.user.view.dashboard': true, 'Admin.permissio ...

javascripttypescriptnext.js

Instantly display selected image

I have encountered some challenges with my previous question on Stack Overflow as I couldn't find a suitable solution. Therefore, I decided to explore an alternative method for uploading images. My current goal is to upload an image immediately after ...

javascriptjquery

"An error occurred while trying to retrieve memory usage information in Node.js: EN

Is there a way to successfully run the following command in test.js? console.log(process.memoryUsage()) When running node test.js on my localhost, everything runs smoothly. However, when attempting to do the same on my server, I encounter this error: ...

javascriptnode.js

Struggling to navigate web pages with Selenium using Java is proving to be a challenge

I am currently working on using Selenium's HtmlUnitDriver and WebElement classes in Java to automate clicking the "Download as CSV" button on Google Trends. The issue that I am encountering is that the button remains hidden until another settings men ...

javascriptjavaseleniumselenium-webdriver

Utilize AJAX/JS and Django to seamlessly upload files

This is the form for my popup window. <div class="popup media-upload-form"> <div class="border cf"> <div class="close">X</div> </div> <form class="cf" action="" method="POST" enctype="multipart/form-data"> ...

javascriptpythonajaxdjango

Struggling to change the div content with ajax response transmitted through php

I would like to apologize in advance if this question has already been addressed elsewhere. After conducting a search, I came across several relevant posts that have guided me to this point. Below is the form snippet containing 1 input box, a button, and ...

javascriptphpjqueryhtmlajax

Is there a way to alter the text color upon touching it?

I'm attempting to modify the background color of a button and also change the text color inside the button. While I was successful in changing the button's color, the text color remained the same. Even after adding a hover effect to the text, the ...

cssreactjstailwind-css

Unexpected issue with Ustream JSON API and jQuery

Recently, I attempted to execute the following jQuery code: var query = 'http://api.ustream.tv/json/channel/masaiblog/getValueOf/status?jsonp=?'; $.getJSON(query, function(data) { if (data['results'] == 'live') { ...

javascriptjqueryjson

Tips on adjusting the width of a div container based on the size of an

I am struggling with setting the width of my "picBox" div equal to the image tag inside. I have tried adjusting the CSS code but cannot seem to get it right. Any suggestions on how to solve this issue would be greatly appreciated. Thank you. The CSS code: ...

htmlcssasp.net

How can I position divs in a way that the top right corner of the child div touches the bottom left corner

I am currently working on implementing a message box feature on my website. When a user clicks on the inbox icon, I want a messages box to appear, similar to how stackoverflow handles it. Stackoverflow achieves this by placing a div outside the ordered lis ...

htmlcssflexboxcss-position

Currently, only the initial button is functional. I am uncertain if it is due to a script issue or if there is a rule that I inadvertently

As a beginner, I am eager to grasp the fundamentals and rules of Javascript. My goal is to create a basic example that involves a box with three buttons. However, I have encountered an issue where only one button seems to be functional despite having dis ...

javascriptbuttongetelementbyid

The attempt to perform a Diffie-Hellman key exchange between Python and Node has hit a roadblock, as an error stating that

Currently, I am attempting to establish a DH key exchange between a Python 3.6 client and a Node server deployed in a Docker container with the latest node image (Node version: v13.10.1). On the client side, I am utilizing the cryptography.io library (v2. ...

javascriptpythonnode.jscryptographydiffie-hellman

Tips for efficiently delivering the create-react-app index file from your server

I have encountered a challenge in my development work with create-react-app. I am looking to serve the index.html file from the backend initially, but I am facing difficulties in achieving this goal. The main reason behind this desire is to customize the ...

javascripthtmlreactjscreate-react-app

The Angular directive ng-model is not able to return a value

I'm currently troubleshooting an issue with the filters in an older project. Here's the HTML snippet: <input type="text" class="form-control" ng-model="FilterEventsEdit" ng-change="FilterEvents()" ...

javascriptangularjsangular-ngmodel

How can we guide the user to a different page when a particular result is retrieved by AJAX?

Whenever my PHP function makes a database call, I receive multiple results. The ajax then displays these results in a div element. My question is: How can I redirect the user to the next page once I obtain a specific result from the PHP function? Current ...

phpjavascriptmysqlajax

Unable to transmit form information using HTML/JavaScript/Express Node application

I'm facing a challenge in developing an app that allows me to input event information and then display it on a map. I'm encountering difficulties at the initial stage when it comes to saving the data. Even though Chrome's Inspect tool indica ...

javascripthtmlnode.jsmongoose

Utilize the Multer file upload feature by integrating it into its own dedicated controller function

In my Express application, I decided to keep my routes.js file organized by creating a separate UploadController. Here's what it looks like: // UploadController.js const multer = require('multer') const storage = multer.diskStorage({ dest ...

javascriptnode.jsexpressmulter

Are there Alternatives for Handling Timeout Exceptions in Selenium WebDriver?

Currently, utilizing Selenium WebDriver with node.js to scrape extensive weather data spanning multiple decades from a site that loads only one day's worth of data per page at full resolution. The process involves navigating between URLs and waiting f ...

javascriptnode.jsseleniumselenium-webdriverwait

Having trouble with @here/maps-api-for-javascript in Next.js - it's not functioning

Can anyone help me understand why @here/maps-api-for-javascript is not functioning properly in my Next.js application and producing the following error message: import H from "@here/maps-api-for-javascript"; export default H; ^^^^^^ SyntaxErr ...

javascriptnext.jshere-api

One issue with my Quiz app is that sometimes the correct and incorrect answer methods run concurrently, leading to occasional occurrences of this problem

One issue I encountered while developing a Quiz app is that sometimes the methods for correct and incorrect answers run simultaneously. This problem occurs sporadically. I want to highlight that my code is functioning correctly. The only challenge I face ...

javascript