android webview not executing javascripts when loading local file

Question

I want to load a local jqmobile html file into a webview. I am able to open it using ALL browsers (includes Android) but not using webview. It does not generate any error, however, content (google map v3) does not appear and javascripts are not triggered!! Please help :(

<uses-library android:name="com.google.android.maps" /> on my manifest and also all permissions.

webview activity,

    browse = (WebView) findViewById(R.id.webview1);
    browse.getSettings().setJavaScriptEnabled(true);
    browse.getSettings().setUseWideViewPort(true);
    browse.getSettings().setLoadWithOverviewMode(true);

    browse.setWebChromeClient(new WebChromeClient());

    browse.setWebViewClient(new WebViewClient());

    browse.loadUrl("file:///data/data/" + PACKAGE_NAME + view1 + ".html");

jqmobile html file,

<!DOCTYPE wml>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<title>HTML5 Geolocation</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true">

<style type="text/css"> 

  html { height: 100%; width:100%;}
  body { height: 100%;; margin: 0px; padding: 0px; }
  #mapDiv { height: 100%; width:100% }
</style>

</head>
<body >
<div data-role="page" style="height: 100%; width:100%;">
<div data-role="header">
        <h1>Localización</h1>
</div>
<div data-role="content" id="mapDiv">   
 <script language="javascript" type="text/javascript">

var xmlDoc=null;
var xmlHttp=null;
var locations=new Array();
var infowindow = new google.maps.InfoWindow(); 
var marker, i; 
alert("llegint location...");
ConectarLectura();
        if (xmlDoc!=null){
            var x=xmlDoc.getElementsByTagName("location");
                for(i=0;i<x.length;i++){
                var punto= new Array();
                var item = xmlDoc.getElementsByTagName('location')[i];  
                var txt = item.getElementsByTagName('nombre')[0]; 
                punto[0]=txt.firstChild.data;   
                var txt = item.getElementsByTagName('cuerpohtml')[0]; 
                punto[1]=txt.firstChild.data;   
                var txt = item.getElementsByTagName('latitud')[0]; 
                punto[2]=txt.firstChild.data;   
                var txt = item.getElementsByTagName('longitud')[0]; 
                punto[3]=txt.firstChild.data;   
                var txt = item.getElementsByTagName('icono')[0]; 
                punto[4]=txt.firstChild.data;
                punto[4]=punto[4].slice(59,punto[4].length);
punto[4]="../../"+punto[4]; 
                locations[i]=punto;
                }
        }

function ConectarLectura(){

    var docdatos=self.location.href.match( /\/([^/]+)$/ )[1];
    docdatos=docdatos.substring(0,docdatos.lastIndexOf("."));
    docdatos=docdatos+".xml";

    alert(docdatos);

    xmlDoc=null;
    var d= new Date();
    var locXML=docdatos+"?"+d.toString();
        if (window.ActiveXObject){//Internet Explorer
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            xmlHttp.open("GET",locXML,false);
            xmlHttp.send();
            xmlDoc = xmlHttp.responseXML;
        }
        else if (document.implementation.createDocument){ //Otros navegadores

            xmlHttp = new XMLHttpRequest();
            xmlHttp.open("GET",locXML,false);
            xmlHttp.send(null);
            xmlDoc = xmlHttp.responseXML;
        }
        else{ //Navegadores no compatibles
            alert('Browser cannot handle this script');
        }
}

    if(navigator.geolocation) {

        function hasPosition(position) {
            var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),

            myOptions = {
                zoom: 20,
                center: point,
                navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},

                mapTypeId: google.maps.MapTypeId.ROADMAP
            },

            mapDiv = document.getElementById("mapDiv"),
            map = new google.maps.Map(mapDiv, myOptions),

            marker = new google.maps.Marker({
                position: point,
                map: map,
                title: "Se encuentra aqui",

            });
            for (i = 0; i < locations.length; i++)
             {   
                marker = new google.maps.Marker({ 
                position: new google.maps.LatLng(locations[i][2], locations[i][3]), 
                map: map,
                icon : locations[i][4]
             });
              google.maps.event.addListener(marker, 'click', (function(marker, i) { 
              return function() { 
                  infowindow.setContent(locations[i][1]); 
                  infowindow.open(map, marker); 

              } 
                  })(marker, i));  

              }
              //Función para añadir nuevos markers
google.maps.event.addListener(map, 'click', function(event) {

    parent.parent.anadePunto(event.latLng);
  });

        }
        navigator.geolocation.getCurrentPosition(hasPosition);
    }

</script>


</div>

</div>
</body>
</html>

Check this answer : http://stackoverflow.com/questions/8373182/webview-cannot-display-local-image-on-phone-but-displays-on-emulator — Anthony, Mar 26 '12 at 14:38
ok, but still not loading google maps v3 and executing javascripts... — Jaume, Mar 26 '12 at 14:39

score 1 · Accepted Answer · answered Mar 26 '12 at 14:46

1

Are you using local storage? Otherwise: settings.setDomStorageEnabled(true);

answered Mar 26 '12 at 14:46

Ferdau

1,524
1
12
21

Try creating a real basic page like:
Hello
try loading this, does that work? – Ferdau Mar 26 '12 at 15:16
Hmm, make sure all the elements doesn't have width/height == 0... So maybe: "body { height: 100%;;" remove second ';'. And give the mapDiv a width/height too. After this you could try to debug your javascript and see if it is a javascript error. This is possible by overriding the onJsAlert of the WebChromeClient and log the JavaScript alerts... – Ferdau Mar 26 '12 at 15:48
well, debugging onJsAlert make me find the solution! I override some geolocation properties of webChromeClient and working.I really appreciate your help, thanks! – Jaume Mar 26 '12 at 19:11

android webview not executing javascripts when loading local file

1 Answers1

Hello