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>

<uses-library> has nothing to do with loading Web-based Google Maps. — CommonsWare
– CommonsWare, Commented Mar 26, 2012 at 14:31
ok, but still not loading google maps v3 and executing javascripts... — Jaume
– Jaume, Commented Mar 26, 2012 at 14:39

Ferdau · Accepted Answer · 2012-03-26 14:46:43Z

1

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

answered Mar 26, 2012 at 14:46

Ferdau

1,5681 gold badge13 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ferdau Over a year ago

Try creating a real basic page like: <html><h1>Hello</h1></html> try loading this, does that work?

Ferdau Over a year ago

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...

Jaume Over a year ago

well, debugging onJsAlert make me find the solution! I override some geolocation properties of webChromeClient and working.I really appreciate your help, thanks!

Collectives™ on Stack Overflow

android webview not executing javascripts when loading local file

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related