HTML/Javascript代码可以在JSbin中工作，但不能在codepen、plunker或JSFIDLE中工作_Javascript_Html_Api_Jsbin_Codepen

HTML/Javascript代码可以在JSbin中工作，但不能在codepen、plunker或JSFIDLE中工作

javascript html api

HTML/Javascript代码可以在JSbin中工作，但不能在codepen、plunker或JSFIDLE中工作,javascript,html,api,jsbin,codepen,Javascript,Html,Api,Jsbin,Codepen,以下代码在JSbin中工作，但在我将其直接复制并粘贴到codepen、plunker或JSFIDLE中时不起作用 <!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

以下代码在JSbin中工作，但在我将其直接复制并粘贴到codepen、plunker或JSFIDLE中时不起作用

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


JS-Bin
函数getWeather（）{
var-ipCall=http://ip-api.com/json';
$.getJSON（ipCall，locationCallBack）
函数locationCallBack（locationData）{
var lat=locationData.lat；
var lon=locationData.lon；
瓦尔阿皮卡尔酒店http://api.openweathermap.org/data/2.5/weather?lat=“+lat+”&lon=“+lon+”&units=imperial&appid=34E8AA0C1D8D15A560DF7A709371071”；
$.getJSON（apiCall、weatherCallBack）
}
函数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（）

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

如果您在浏览器控制台上进行检查，您将看到如下错误：

jquery.min.js:4混合内容：[CODEPEN/JSFIDDLE URL]处的页面是通过HTTPS加载的，但请求了不安全的XMLHttpRequest端点“”。此请求已被阻止；内容必须通过HTTPS提供

这是因为Codepen和JsFiddle只允许HTTPS请求，而且您使用的两个api都没有HTTPS协议

请在此处阅读更多信息：

在plunker工作对我来说，这是一个很好的观点，这是一条路要走。安全第一是我喜欢这些垃圾箱的一个优点+1.