Question

我目前正在使用W3Schools脚本在Github上为Github Pages制作回购。我的index.html代码如下所示：

<!DOCTYPE html>
<html>
    <head>
        <title>[my name] Witness Project</title>
        <script src="http://w3schools.com/lib/w3data.js"></script>
    </head>
    <body>
        <div w3-include-html="common.html"></div>
        <div id="main">
            <h1 style="display:block">This will be my Witness Project soon!</h1>
        </div>
    </body>
    <script>
    w3IncludeHTML();
    </script>
</html>

在common.html中，有标题和页脚的代码：

<link rel="stylesheet" href="common.css">
<div id="header">
    <nav>
        <button type="button"><a href="index.html">Home</a></button>
        <button type="button"><a href="#">Coming Soon</a></button>
        <button type="button"><a href="#">Coming Soon</a></button>
        <button type="button"><a href="#">Coming Soon</a></button>
        <button type="button"><a href="#">Coming Soon</a></button>
    </nav>
</div>

<div id="footer">
    Created as part of <i>The Witness Project</i> at The Key School<br>
    <i>Content of website © 2016 by [my name]</i>
</div>

我正在使用描述here的脚本来导入其他HTML文件。我不认为CSS是相关的。当我加载我的Github Pages页面时，我只看到index.html中的元素。但这不是我的错，因为当我从本地文件加载页面时，它看起来就像我期望的那样。

图片：
在线：
本地：到底是怎么回事？你能否在Github上使用外部JS？

编辑：我检查了控制台并得到了这条消息：

Answer 1

您收到的错误Blocked loading mixed active content "http://w3schools.com/lib/w3data.js"表示您有“混合内容” - 也就是说，某些内容是通过https加载的，其他内容是在http上不安全地加载的。

通过http加载这样的脚本使得它很容易被发送者和接收者之间的篡改，因此它被认为是安全风险，并且（某些）浏览器会阻止它。

当您链接到脚本时，您可以在没有协议的情况下使用<script src="//w3schools.com/lib/w3data.js"></script>，并且将使用用于加载页面的任何协议（http或https）加载scrpt。这将消除错误。

不幸的是，我测试https://w3schools.com/lib/w3data.js并且它（第一次）给了我一个证书错误，然后404 ... w3schools没有通过https使该脚本可用。
在这种情况下，您最好的选择是在本地保存副本并链接到该副本而不是w3schools CDN。

为什么Github Pages不允许我的有效HTML？

1 个答案: