在页面加载过程中，在不重定向到其他页面的情况下，在同一页面上打印距离结果

Print the distance result on same page without redirecting to other page during page loading

本文关键字：一页 打印 距离 情况下 结果 过程中 加载 重定向 其他      更新时间：2023-09-26

我已经实现了以下代码来打印从当前位置到给定位置的距离。

根据目前的情况，当页面加载时，会生成一个超链接，当我点击该URL时，它会重定向到不同页面上的我，并显示距离结果。

是否有任何方法可以在加载时直接在同一页面上打印结果，而无需单击任何链接？

<html>
<body onLoad="javascript:showlocation()">
<p id="demo"></p>

<script>
function showlocation()
{
   navigator.geolocation.getCurrentPosition(callback);
}
function callback(position) 
{
    var str = "Free Web Building Tutorials!";
    var url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins="+position.coords.latitude+","+position.coords.longitude+"&destinations=london&mode=transit&transit_mode=train&key=AIzaSyCeBdq7rr-R7w7vZCXscLWgEDb3oO9CUhw";
    document.getElementById("demo").innerHTML = str.link(url);
}
</script>
</body>
</html>

您应该了解Javascript如何操作DOM——添加和删除元素、更改文本和html等。我还建议您查看JQuery，因为原始浏览器Javascript往往会变得非常混乱、非常快。强烈推荐那些尽可能避开图书馆的人。

在大多数情况下，使用可以非常容易地设置窗口的位置

window.location = url; // eg, 'https://google.com'

例如，如果我在浏览器中用file:// url打开它，它就会工作：

<script>
url = 'https://maps.googleapis.com/maps/api/distancematrix/json?origins=-93.243956,44.909974&destinations=new%20york&mode=transit&transit_mode=train&key=AIzaSyCeBdq7rr-R7w7vZCXscLWgEDb3oO9CUhw'
function setLocation(){
  window.location = url;
}
</script>
<body onLoad='setLocation()' >
</body>

这应该与单击匹配链接的结果基本相同。不幸的是，我无法让它在堆栈溢出片段中工作，但我在本地测试了文件中的内容，它重定向得很好。如果它对你不起作用，我建议你发布一个更完整的例子。

如果你想在页面上留下其他内容，你有几个选择。有些API允许从AJAX或iframe进行调用，而另一些则可能使用身份验证、CORS或其他方式来禁止。

从下面的例子中可以明显看出，谷歌通过设置适当的标题来禁止这些请求（浏览器控制台将解释显示被阻止）。像谷歌这样的人通过各种机制来保护他们的免费API，试图阻止人们重塑他们的产品品牌或滥用他们的产品，这并不罕见。我相信，如果您查看您尝试使用的API的文档，它将解释如何为用户验证这些请求。

下面有一个示例，它以几种方式操纵DOM-使用innerHTML，一种普通的javascript浏览器方法，以及使用JQuery（$是JQuery接口的同义词）-您会看到它要容易得多（您可能看不到的是，在所有相关的web浏览器中，如果没有JQuery，执行操作有多难！）。如果换掉URL，您可以看到当URL响应允许浏览器显示命令时，这些命令可以工作。

  function showlocation()
{
   //navigator.geolocation.getCurrentPosition(callback);
  callback( { coords: { longitude: 44.909974, latitude: -93.243956 } } );
}
             
function callback(position) 
{
    var str = "Free Web Building Tutorials!";
    var url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins="+position.coords.latitude+","+position.coords.longitude+"&destinations=new%20york&mode=transit&transit_mode=train&key=AIzaSyCeBdq7rr-R7w7vZCXscLWgEDb3oO9CUhw";
    document.getElementById("demo").innerHTML = str.link(url);
    document.getElementById("iframe").src = url;
    ajax(url);
}
function ajax(url){
  $('#ajaxres').html("Loading...");
  $.ajax({ 
     url: url, 
     success: function(result, status){
        $('#ajaxres').html( result );
                 
     },
     error: function(req, status, msg){
       $('#ajaxres').html( "Error!  Status: " + status + ", message: <code>"+msg+"</code>, Response: <pre> " + JSON.stringify(req) + "</pre>" ); 
     }
  })
}
body {
    background-color: aquamarine;
  }
code:before {
   content: "'";
  }
code:after {
    content: "'";
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script>
  </script>
  </head>
<body onLoad="showlocation();">
<p id="demo"></p>
<p>This won't work because X-Frame-Options header of the response is SAMEORIGIN ( see browser console for errors ).  You'll just see an empty box with an ugly 90s border (but ymmv):</p>
<iframe id='iframe'></iframe>
<p>The AJAX also doesn't work because </code> the Access-Control-Allow-Origin header is present on the requested resource</code> ( see console )</p>
<div id='ajaxres'></div>
</body>
</html>

相关文章：