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

问题描述：

以下代码在JSbin中工作，但不是在我直接复制并粘贴到codepen，plunker或jsfiddle时。HTML/Javascript代码在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获取地理位置数据和天气信息。

作品对我来说http://plnkr.co/edit/gFsOogp7Jc0kqPrqex1X?p=preview – charlietfl

答

如果您浏览器的控制台上检查，你会看到这样的错误：

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

这是发生因为Codepen和的jsfiddle只允许HTTPS请求，双方你使用不具有HTTPS协议的API。

了解更多关于在这里：在plunker https://blog.codepen.io/2017/03/31/codepen-going-https/

这是一个很好的点，它是要走的路。首先安全是我喜欢这些垃圾箱的强项。 +1 –

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

相关推荐