8

I am using HTML5 Geolocation to get the user's latitude and longitude. It works fine on all browsers when the page is opened directly, but now I have to put the geolocation code inside an iframe. After putting it in the iframe, the geolocation doesn't prompt for the user's coordinates.

How do I get the user's latitude and longitude when the page is loading in an iframe?

let's say this is the code:

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;    
  }
</script>
</body>
</html>
ahsan-ali
  • 133
  • 3
  • 11

3 Answers3

11

Adding allow="geolocation" attribute to the iframe tag worked for me.

It now correctly asks for geolocation rights.

https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes

Mibou
  • 936
  • 2
  • 13
  • 25
3

You probably have solved this already, but nonetheless, the issue lies here:

var x = document.getElementById("demo");

The above is fine when you run the page as-is, but when loaded via an iframe, the "document" refers to the parent frame (not the child you care about). Try something like this:

var x = document.getElementById("frameId").contentWindow.document.getElementById("demo");

where "frameId" refers to the frame that houses the page displaying the lat / long info.

There are some restrictions on usage, for more info see this excellent thread: How to pick element from inside iframe

Community
  • 1
  • 1
Shaba Abhiram
  • 31
  • 2
0

hope this is help its a javascript file , it should work hopefully

var btn = $('div.main a.btn'),
    longitude = $('#longitude'),
    latitude = $('#latitude');
function savePosition(position) {
  var long = position.coords.longitude,
      lat = position.coords.latitude
  longitude.text(long);
  latitude.text(lat);
}
function positionError() {
  $('div.main').prepend('<p class="error"><strong>Sorry!</strong> There was an error getting your location.</p>');
}

btn.click(function(elem) {
  elem.preventDefault();
  if (navigator.geolocation) {
    // Can use geolocation, proceed with getting the location
    navigator.geolocation.getCurrentPosition(savePosition, positionError);
  } else {
    // Can't use geolocation, we should tell the user
    $('div.main').prepend('<p class="error">Your browser doesn\'t support geolocation. Try upgrading to a newer browser like <a href="http://chrome.google.com/" target="_blank">Google Chrome</a></p>');
  }
});

in your html

<a href="#" class="btn">Get my location!</a>
  <p>
    Longitude: <span id="longitude"></span>
    <br>
    Latitude: <span id="latitude"></span>
  </p>
Hashes
  • 110
  • 8
  • had you tested it in iframe?...i dont think so it will work in iframe – ahsan-ali Jul 21 '13 at 00:14
  • 2
    aint you got my point? geolocation code is working when you open page directly in the browser but when i open the page in other page using iframe then geolocation doesn't work! – ahsan-ali Jul 21 '13 at 21:26