Веб-страница запускается локально, но не работает на GitHub и CodePen.

Это приложение WeatherApp, которое извлекает данные из OpenWeatherMap API и отображает несколько выбранных результатов. Я запустил код локально в своей системе, прежде чем загрузить его в репозиторий GitHub, чтобы протестировать его как страницу. Поразительно, но я обнаружил, что код не работает на странице GitHub или на CodePen. Есть причины почему? Ссылка на веб-страницу: WeatherCheck

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<style>

#container{ 
background-color: #3E5060;
margin: 20%;
padding: 2.5%;
}

body{
background-color: #B2D6F7;
font-family: 'Abril Fatface', cursive;
font-size: 300%;
color: white;
opacity: 0.7;
filter: alpha(opacity=70);
}

#demo {
font-size: 200%;
}
</style>
</head>
<body>

<div class = "text-center" id="container"> 
<img id = "demo0">          
<p id="demo"></p>
<p id="demo7"></p>
<div class="row">
<div class="col-sm-6">
<p id="demo1"></p>
</div>
<div class="col-sm-6">
<p id="demo2"></p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<p id="demo3"></p>
</div>
<div class="col-sm-6">
<p id="demo4"></p>
</div>
</div>
<p id="demo6"></p>
<button onclick="getLocation()" style="color:black;">Click!</button>
</div>
<script>
var x = document.getElementById("demo");
var x1 = document.getElementById("demo1");
var x2 = document.getElementById("demo2");
var x3 = document.getElementById("demo3");
var x4 = document.getElementById("demo4");
var x5 = document.getElementById("demo0");
var x6 = document.getElementById("demo6");
var x7 = document.getElementById("demo7");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    latitude = position.coords.latitude; 
    longitude =  position.coords.longitude;
    console.log(latitude);
    getData(latitude, longitude);
}

function getData(lat,long)
{
    console.log(long);
    var API_KEY = "*************************";
    var apiUrl = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&units=metric&appid=" + API_KEY;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", apiUrl, false);
    xhr.send();
    console.log(xhr.status);
    console.log(xhr.statusText);

    response = JSON.parse(xhr.response);
    console.log(xhr.response);
    console.log(response.weather[0].icon);
    x.innerHTML = response.name;
    x1.innerHTML = parseInt(response.main.temp_max);
    x2.innerHTML = response.main.humidity;
    x3.innerHTML = response.wind.speed;
    x4.innerHTML = response.wind.deg;
    x5.src = "http://openweathermap.org/img/w/" + response.weather[0].icon + ".png";
    x6.innerHTML = response.weather[0].description;
    var date = new Date();
    console.log(date.getHours()>12);
    x7.innerHTML = date.getHours() + ":" + date.getMinutes();
    if(date.getHours()>17 || date.getHours()<5){
        document.getElementById("container").style.background= "#B2D6F7";
        document.body.style.background= "#3E5060";      
    }
}
</script>

</body>
</html>

javascript html css github-pages codepen
person djokester    schedule 27.04.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Устаревание

getCurrentPosition() и watchPosition() больше не работают с небезопасными источниками. Чтобы использовать эту функцию, вам следует подумать о переключении вашего приложения на безопасный источник, такой как HTTPS.

См. https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins для получения дополнительной информации.

index.html : 67

Проверьте предупреждения devtools (F12)

person rafaelcastrocouto    schedule 27.04.2017
comment
Я также получаю еще одну ошибку, index.html:79 Синхронный XMLHttpRequest в основном потоке устарел из-за его пагубных последствий для работы конечного пользователя. - person djokester; 28.04.2017
comment
developer.mozilla.org/en-US/docs/Web/ API/XMLHttpRequest/ - person rafaelcastrocouto; 28.04.2017