7

我正在使用 HTML5 Geolocation 来获取用户的纬度和经度。直接打开页面时，它在所有浏览器上都可以正常工作，但是现在我必须将地理位置代码放在 iframe 中。将其放入 iframe 后，地理位置不会提示用户输入坐标。

当页面在 iframe 中加载时，如何获取用户的纬度和经度？

假设这是代码：

<!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>
4

3 回答 3

10

向 iframe 标签添加allow="geolocation"属性对我有用。

它现在正确地请求地理定位权。

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

于 2018-04-25T16:09:49.100 回答
3

您可能已经解决了这个问题，但问题在于：

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

当您按原样运行页面时，上述内容很好，但是当通过 iframe 加载时，“文档”指的是父框架（而不是您关心的子框架）。尝试这样的事情：

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

其中“frameId”是指包含显示纬度/经度信息的页面的框架。

使用上有一些限制，有关更多信息，请参阅这个优秀的线程：如何从 iframe 内部挑选元素

于 2014-03-18T15:49:13.193 回答
0

希望这对它的 javascript 文件有所帮助，它应该可以正常工作

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>');
  }
});

在你的 html

<a href="#" class="btn">Get my location!</a>
  <p>
    Longitude: <span id="longitude"></span>
    <br>
    Latitude: <span id="latitude"></span>
  </p>
于 2013-07-20T20:08:53.430 回答