javascripthtmlgithubgithub-pagesexternal-script

Why will Github Pages not allow my valid HTML?

I am currently making a repo on Github for Github Pages that utilizes a W3Schools script. My index.html code looks like this:

<!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>

In common.html, there is code for a header and a footer:

<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>

I am utilizing a script described here to be able to import other HTML files. I don't think the CSS is relevant. When I load my Github Pages page however, I only see the elements in index.html. It's not my fault though, because when I load the page from my local files, it looks like I expect it to.

Images:
Online:Online
Local:Local What is going on? Can you not use external JS on Github?

EDIT: I checked the console and got this message: Error

Solution

  • The error you are getting, Blocked loading mixed active content "http://w3schools.com/lib/w3data.js", indicates that you have "mixed content" — that is, some content is loaded over https and other content is loaded insecurely over http.

    Loading a script like this over http makes it vulnerable to tampering in between the sender and the receiver, so it is considered a security risk and (some) browsers will block it.

    When you link to the script you can use <script src="//w3schools.com/lib/w3data.js"></script> without the protocol and the scrpt will be loaded using whatever protocol (http or https) that was used to load the page. That will eliminate the error.

    Unfortunately, I tested https://w3schools.com/lib/w3data.js and it (first) gave me a certificate error, then a 404 ... w3schools isn't making that script available over https.
    Your best bet in that case is to save a copy locally and link to that instead of the w3schools CDN.