Webshims, IE8, and Geolocation

StackOverflow https://stackoverflow.com/questions/8751464

Pergunta

I wanted multiple options for making geolocation work for our IE8 laptops and have investigated both the Google Chrome Frame (which works) and the jquery polyfill (which is what I am trying to get working). The website the example was taken from is webshims and I have verified that the mentioned demo page works in IE8, but I can't recreate the example for myself. This is my jsp:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Geolocation</title>
    <script src="<c:url value="/js/jquery-1.6.4.min.js"/>" type="text/javascript"></script>
    <script src="<c:url value="/js/modernizr-latest.js"/>" type="text/javascript"></script>
    <script src="<c:url value="/js/polyfiller.js"/>" type="text/javascript"></script>
    <script type="text/javascript">
      //http://afarkas.github.com/webshim/demos/demos/geolocation.html
      $.webshims.polyfill();
      navigator.geolocation.getCurrentPosition(function(pos){ $("#status").html("found you! latitude: "+ pos.coords.latitude +"/longitude: " + pos.coords.longitude); });
    </script>
  </head>
  <body>
    <p>Finding your location: <span id="status">checking...</span></p>
  </body>
</html>

It works in any browser where geolocation is natively supported, but the polyfill doesn't seem to be doing its job for IE8. I get the below error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; chromeframe/15.0.874.121; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Timestamp: Wed, 7 Dec 2011 17:48:06 UTC

Message: 'navigator.geolocation' is null or not an object Line: 13 Char: 7 Code: 0 URI: ../GeoLocation/jquery.action

Am I missing something to make this function properly?

Foi útil?

Solução

You need to activate the polyfill first. See the example source that has the following script in it's head:

$.webshims.setOptions('geolocation', {
            confirmText: '{location} wants to know your position. It is Ok to press Ok.'
        });
        //load all polyfill features
        //or load only a specific feature with $.webshims.polyfill('feature-name');
        $.webshims.polyfill();

Update: This HTML page works just fine both in IE9, IE7 and Chrome

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Geolocation</title>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/extras/modernizr-custom.js" type="text/javascript"></script>
    <script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/polyfiller.js" type="text/javascript"></script>
    <script type="text/javascript">
      //http://afarkas.github.com/webshim/demos/demos/geolocation.html
      $.webshims.setOptions('geolocation', {
            confirmText: '{location} wants to know your position. It is Ok to press Ok.'
        });
      $.webshims.polyfill();
      $(function(){
        navigator.geolocation.getCurrentPosition(function(pos){ $("#status").html("found you! latitude: "+ pos.coords.latitude +"/longitude: " + pos.coords.longitude); });
      });
    </script>
  </head>
  <body>
    <p>Finding your location: <span id="status">checking...</span></p>
  </body>
</html>

Make sure to serve it using HTTPL// and not FILE://

Outras dicas

I'm the creator of webshims lib. To clarify your issue, here some informations.

  1. You do not need to set the options to get geoloaction work. This is only an option, not the init code. (More Info for setting options in general)

  2. yes you have to initialize your code, if you only need geoloaction and none of the other features, you should use the following line (More Infos about initialiazing features):

    $.webshims.polyfill('geolocation');

If you use the polyfill method without any arguments all features will be implemented, which increases download size.

  1. Polyfill-Readiness (the reason, why your script didn't work). Webshims implements the features, using a script loader, which implements everything async, so you have to wait for a specific callback. (More information about readyness of a feature)

Either you wait for jQuery's ready callback (which is delaey untill all features are implemented:

$(function(){
    //use feature here (all features + DOM are ready
});

Or, if you want to access your feature as soon as possible, there is a special ready callback, which will be triggered before DOM-Ready:

$.webshims.ready('geolocation', function(){
    //use geolocation feature here
});

If you have any questions or any suggestions including, how to improve the documentation, please let me know.

maybe navigator.geolocation isn't allowed on localhost try pushing it into the www. :)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top