Menu
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>
316
Function to display Latitude and Longitude Correct Answer : showPosition(). The HTML5 geolocation feature lets you find out the geographic coordinates (latitude and longitude numbers) of the current location of your website's visitor. The showPosition() function in HTML is used to locate a user's position.
Approach: To get the geographic position of a user in HTML5, we use geolocation API. Geo-location in HTML5 is used to share the location of the user with some website if the user allows. It uses JavaScript to get the latitude and longitude. Most of the browsers support Geolocation API.
If supported, run the getCurrentPosition() method. If not, display a message to the user. If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter (showPosition) The showPosition() function outputs the Latitude and Longitude.
HTML5 Geolocation. The Geolocation is one of the best HTML5 API which is used to identify the user's geographic location for the web application. Most of the geolocation services use Network routing addresses such as IP addresses, RFID, WIFI and MAC addresses or internal GPS devices to identify the user's location.
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
68
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
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
