网页在本地运行但在 GitHub 和 CodePen 上失败

Question

这是一个 WeatherApp，可从 OpenWeatherMap API 中提取数据并显示选定的几个结果。我运行代码在我的系统本地，然后将其上传到 GitHub 存储库以将其作为页面进行测试。令人震惊的是，我发现该代码无法作为 GitHub 页面或在 CodePen 上运行。有什么理由吗？ Link 到网页：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>

Answer 1

弃用

getCurrentPosition() 和 watchPosition() 不再适用于不安全的来源。要使用此功能，您应该考虑将您的应用程序切换到安全来源，例如 HTTPS。

有关详细信息，请参阅 https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins。

index.html : 67

检查您的开发工具警告 (F12)

网页在本地运行但在 GitHub 和 CodePen 上失败

Web page runs locally but fails on GitHub and CodePen

html

javascript

css

github-pages

codepen