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

3

あなたはおそらくこれをすでに解決しているでしょうが、それにもかかわらず、問題はここにあります：

var x = document.getElementById("デモ");

上記は、ページをそのまま実行する場合は問題ありませんが、iframe を介してロードすると、「ドキュメント」は親フレームを参照します (対象の子フレームではありません)。次のようなことを試してください：

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

ここで、「frameId」は、緯度/経度情報を表示するページを収容するフレームを指します。

使用にはいくつかの制限があります。詳細については、この優れたスレッドを参照してください: How to pick element from inside 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 に答える