Question

以下代码适用于JSbin，但不能直接复制并粘贴到codepen，plunker或jsfiddle中。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>


<script>
  function getWeather(){

  var ipCall = 'http://ip-api.com/json';
  $.getJSON(ipCall, locationCallBack)

  function locationCallBack(locationData){
    var lat =locationData.lat; 
    var lon = locationData.lon;

    var apiCall = 'http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+lon+'&units=imperial&appid=34e8aa0c1d8d15a560df7a7093711071';

    $.getJSON(apiCall, weatherCallBack)
  }



  function weatherCallBack(weatherData){
  var cityName = weatherData.name;
  var cityTemp = weatherData.main.temp;
  var weatherType = weatherData.weather[0].main;
  var weatherIcon = weatherData.weather[0].icon;  

  $('.cityName').append(cityName);
  $('.cityTemp').append(cityTemp);
  $('.weatherType').append(weatherType +' '+ weatherIcon);  
    }

  }
getWeather()
</script> 

<div class ="cityName">


</div>

<div class="cityTemp">

</div>

<div class="weatherType">

</div>

</body>
</html>

代码显示该位置的用户位置和天气信息。使用api获取地理位置数据和天气信息。

Answer 1

如果您在浏览器的控制台上查看，则会发现如下错误：

jquery.min.js：4混合内容：[CODEPEN / JSFIDDLE URL]上的页面是通过HTTPS加载的，但是请求了一个不安全的XMLHttpRequest端点＆＃39; http://ip-api.com/json＆＃39;。此请求已被阻止;内容必须通过HTTPS提供。

发生这种情况是因为Codepen和JsFiddle只允许 HTTPS 请求，并且您使用的两个API都没有HTTPS协议。

在这里阅读更多相关信息： https://blog.codepen.io/2017/03/31/codepen-going-https/

HTML / Javascript代码在JSbin中工作，但不在codepen，plunker或jsfiddle中工作

1 个答案: