为什么阻止加载混合活动内容？

Question

今天我发现了错误

Blocked loading mixed active content "http://ip-api.com/json/?callback=jQuery2240797948164524662_1471014635124&_=1471014635125"

在火狐中。

这是我的代码

function getCurrentWeather(){
  $.getJSON("http://ip-api.com/json/?callback=?", function(data) {
      var lat=data["lat"];
      var lon=data["lon"];
      updateWeatherDisplay(lat,lon);         
      updateAddress(data["city"],", "+data["region"]);
    });
}

但这是另一个代码，它对 api 进行等效查询 - 没有错误！：

function getLocation() {
    $.get('http://ip-api.com/json', function(loc) {
        $('#location').text(loc.city + ', ' + loc.region + ', ' + loc.country);
        getWeather(loc.lat, loc.lon, loc.countryCode);
    })
    .fail(function(err) {
        getWeather();
    });
}

两个示例都在 https://codepen io.

上运行

我已经知道我应该使用 https:// 来调用 api。但是我很好奇，为什么第二个例子没有错误？

Answer 1

因为https://codepen/ is use secure (https protocol) and http://ip-api.com使用不安全（http协议）。

ip-api.com 目前 不支持 https，如果他们支持 https，您可以使用 secure (https协议）https://ip-api.com

function getCurrentWeather(){
  $.getJSON("https://ip-api.com/json/?callback=?", function(data) {
   var lat=data["lat"];
   var lon=data["lon"];
   updateWeatherDisplay(lat,lon);         
   updateAddress(data["city"],", "+data["region"]);
  });
}

为什么阻止加载混合活动内容？

Why Blocked loading mixed active content?

https

jquery

mozilla