java - Android WebView: only loads HTML, does not load JS or CSS (in some devices)

I have an web app called Vane (link). It works properly on my phone (Samsung S3) and some devices, but in some devices it just loads the html part no js no css..

Any reason why? This is my first app and i don't know much of java.. Pictures:

This is how it should work (Samsung s3)

And this is how it looks in some other devices, only html (Xtouch phone)

Webview code:

package .expedyte.vane;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.webkit.GeolocationPermissions;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.WebStorage;


public class IWeather extends Activity {


    public class GeoWebViewClient extends WebViewClient {
       @Override
       public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // When user clicks a hyperlink, load in the existing WebView
        view.loadUrl(url);
       return true;
   }
}


public class GeoWebChromeClient extends WebChromeClient {
    @Override
    public void onGeolocationPermissionsShowPrompt(String origin,
            GeolocationPermissions.Callback callback) {

        callback.invoke(origin, true, false);
    }
}

WebView mWebView;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_iweather);
    WebView mWebView = (WebView) findViewById(R.id.web_engine);

    mWebView.getSettings().setDomStorageEnabled(true);
    mWebView.getSettings().setAppCacheEnabled(true);        
    mWebView.getSettings().setDatabaseEnabled(true);
    String databasePath = this.getApplicationContext().getDir("database",Context.MODE_PRIVATE).getPath(); 
    mWebView.getSettings().setDatabasePath(databasePath);
    mWebView.setWebViewClient(new GeoWebViewClient());
    // Below required for geolocation
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.getSettings().setGeolocationEnabled(true);
    mWebView.setWebChromeClient(new GeoWebChromeClient()
    { 
        public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota, long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) { 
                quotaUpdater.updateQuota(5 * 1024 * 1024); 
            } 
        }); 

    mWebView.loadUrl("file:///android_asset/www/weather/index.html");
}
}

Html code:

<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/vane/we.ico" type="image/x-icon" />
<link rel="stylesheet" href="swiper.css">
<link rel="stylesheet" href="style.css?1">
<link href='+Sans:400,300,600' rel='stylesheet'>
<script src="jquery.js"></script>
<script src="plugins.js"></script>
<script src="script.js"></script>
<script src=";sensor=false"></script>
<meta name="viewport" content="initial-scale=1, user-scalable=no">
  </head>
  <body>
  <div id="loader"><img src="load.png"></div>


<div id="weather">
    <div class="swiper-container swiper-1" id="mainswipe">
            <div class="swiper-wrapper">
                <div class="swiper-slide ordinary">
                    <div class="swiper-container swiper-2">
                        <div class="swiper-wrapper" id="scroller">

                        </div>
                    </div>
                </div>
                <div class="swiper-slide ordinary" id="places_main">
                    <div class="card">
                    <input type="text" class="search" id="search" onclick="if(this.value=='Enter a place.'){this.value=''; this.select()} else    {this.select()}" value="Enter a place."></input><div class="go" onclick="addPlace()">+</div>
                    <div id="placeholder">
                        <div class="swiper-container places">
                            <div class="swiper-wrapper" id="places">
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div></div>
<div id="rate">
        <div id="rate_title">Rate Us</div>
        <div id="rate_content">Show us how much you love this app by rating us on the app store. Thank you for checking us out.</div>
        <a href=".woa/wa/viewContentsUserReviews?id=630139527&pageNumber=0&sortOrdering=1&type=Purple+Software&mt=8"><div class="button confirm">Rate Us</div></a>
        <div class="button remind" onclick="$('#rate').fadeOut()">Remind me later</div>
        <div class="button never" onclick="never_again()">Never ask me again</div>
  </div>
  <div id='alertbox'>
        <div id='alertheader'>ALERT</div>
        <div id='alertcontent'>
                <div></div>
        </div>
        <div class='close' onclick='cancelalert()'>Close</div>
  </div>
  <div id="info">
  <div class="half">
        <div id="header"><div id="back" onclick="hide_info()">Back</div>About</div>
        <div id="video">
            <iframe src="" frameborder="0" allowfullscreen></iframe>
        </div>
  </div>
  <div id="scroller">
        <div class="setting">
            <div class="label">Unit</div>
            <div id="unit">C</div><div class="degree">&ordm;</div>
            <div class="switch" onclick="changeUnit()"><div id="toggle"></div></div>
        </div>
  </div>
  </div>
  </body>
  </html>

I have an web app called Vane (link). It works properly on my phone (Samsung S3) and some devices, but in some devices it just loads the html part no js no css..

Any reason why? This is my first app and i don't know much of java.. Pictures:

This is how it should work (Samsung s3)

And this is how it looks in some other devices, only html (Xtouch phone)

Webview code:

package .expedyte.vane;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.webkit.GeolocationPermissions;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.WebStorage;


public class IWeather extends Activity {


    public class GeoWebViewClient extends WebViewClient {
       @Override
       public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // When user clicks a hyperlink, load in the existing WebView
        view.loadUrl(url);
       return true;
   }
}


public class GeoWebChromeClient extends WebChromeClient {
    @Override
    public void onGeolocationPermissionsShowPrompt(String origin,
            GeolocationPermissions.Callback callback) {

        callback.invoke(origin, true, false);
    }
}

WebView mWebView;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_iweather);
    WebView mWebView = (WebView) findViewById(R.id.web_engine);

    mWebView.getSettings().setDomStorageEnabled(true);
    mWebView.getSettings().setAppCacheEnabled(true);        
    mWebView.getSettings().setDatabaseEnabled(true);
    String databasePath = this.getApplicationContext().getDir("database",Context.MODE_PRIVATE).getPath(); 
    mWebView.getSettings().setDatabasePath(databasePath);
    mWebView.setWebViewClient(new GeoWebViewClient());
    // Below required for geolocation
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.getSettings().setGeolocationEnabled(true);
    mWebView.setWebChromeClient(new GeoWebChromeClient()
    { 
        public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota, long estimatedSize, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) { 
                quotaUpdater.updateQuota(5 * 1024 * 1024); 
            } 
        }); 

    mWebView.loadUrl("file:///android_asset/www/weather/index.html");
}
}

Html code:

<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="/vane/we.ico" type="image/x-icon" />
<link rel="stylesheet" href="swiper.css">
<link rel="stylesheet" href="style.css?1">
<link href='http://fonts.googleapis./css?family=Open+Sans:400,300,600' rel='stylesheet'>
<script src="jquery.js"></script>
<script src="plugins.js"></script>
<script src="script.js"></script>
<script src="http://maps.googleapis./maps/api/js?key=AIzaSyCaF3Xp-29k7VdixW4PzUU4wmtRAM7T-RA&sensor=false"></script>
<meta name="viewport" content="initial-scale=1, user-scalable=no">
  </head>
  <body>
  <div id="loader"><img src="load.png"></div>


<div id="weather">
    <div class="swiper-container swiper-1" id="mainswipe">
            <div class="swiper-wrapper">
                <div class="swiper-slide ordinary">
                    <div class="swiper-container swiper-2">
                        <div class="swiper-wrapper" id="scroller">

                        </div>
                    </div>
                </div>
                <div class="swiper-slide ordinary" id="places_main">
                    <div class="card">
                    <input type="text" class="search" id="search" onclick="if(this.value=='Enter a place.'){this.value=''; this.select()} else    {this.select()}" value="Enter a place."></input><div class="go" onclick="addPlace()">+</div>
                    <div id="placeholder">
                        <div class="swiper-container places">
                            <div class="swiper-wrapper" id="places">
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div></div>
<div id="rate">
        <div id="rate_title">Rate Us</div>
        <div id="rate_content">Show us how much you love this app by rating us on the app store. Thank you for checking us out.</div>
        <a href="http://itunes.apple./WebObjects/MZStore.woa/wa/viewContentsUserReviews?id=630139527&pageNumber=0&sortOrdering=1&type=Purple+Software&mt=8"><div class="button confirm">Rate Us</div></a>
        <div class="button remind" onclick="$('#rate').fadeOut()">Remind me later</div>
        <div class="button never" onclick="never_again()">Never ask me again</div>
  </div>
  <div id='alertbox'>
        <div id='alertheader'>ALERT</div>
        <div id='alertcontent'>
                <div></div>
        </div>
        <div class='close' onclick='cancelalert()'>Close</div>
  </div>
  <div id="info">
  <div class="half">
        <div id="header"><div id="back" onclick="hide_info()">Back</div>About</div>
        <div id="video">
            <iframe src="http://www.youtube./embed/KLbYRPIZ5-4" frameborder="0" allowfullscreen></iframe>
        </div>
  </div>
  <div id="scroller">
        <div class="setting">
            <div class="label">Unit</div>
            <div id="unit">C</div><div class="degree">&ordm;</div>
            <div class="switch" onclick="changeUnit()"><div id="toggle"></div></div>
        </div>
  </div>
  </div>
  </body>
  </html>

Share Improve this question edited Jul 11, 2013 at 18:22 asked Jul 11, 2013 at 14:05 Amit Joseph 952 silver badges6 bronze badges

got any relevant code? did you see this: stackoverflow./a/16410297/794088 ? – petey Commented Jul 11, 2013 at 14:08
Yea I saw that.. no luck! But the app works properly in my phone and some other devices on which i tested on.. The Problem is Only in some devices it doesn't work.. – Amit Joseph Commented Jul 11, 2013 at 17:44
@AmitJoseph add also the html. The relevant part will be with where you specify the addresses of the external resources: css + js – Boris Strandjev Commented Jul 11, 2013 at 17:57
I'm facing the same issue... has this ever been resolved? – T-Rex Commented Dec 5, 2016 at 12:13

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

you edite code +

super.onStart();

WebView webView =  (WebView)findViewById(R.id.webView1);

//enable JavaScript ***
webView.getSettings().setJavaScriptEnabled(true);

webView.loadUrl("file:///android_asset/index.html");

if javascript not working, just add this:

webView.getSettings().setJavaScriptEnabled(true);

There is a known bug in the file protocol for a few android versions. If you are referencing files with url parameters a HTTP 404 (file not found) occurs and the file is not loaded.

In your case the "style.css?1" is not loded.

Overing Honeyb and Ice Cream Sandwich’s Broken WebView URLs

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

java - Android WebView: only loads HTML, does not load JS or CSS (in some devices) - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)