首页 文章

在iframe中加载HTML5地理位置时访问用户的纬度和经度

提问于
浏览 次
3

我使用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>
javascript html5 iframe geolocation

3 回答

  • 3

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

    var x = document.getElementById（“demo”）;

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

    var x = document.getElementById（“frameId”） . contentWindow.document.getElementById（“demo”）;

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

    使用有一些限制，有关更多信息，请参阅此优秀主题：How to pick element from inside iframe

    回复于
  • 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>
    回复于
  • 0

    将 allow="geolocation" 属性添加到iframe标签为我工作 .

    它现在正确地要求地理定位权 .

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

    回复于

相关问题