1

私は現在、W3Schools スクリプトを利用する Github Pages の Github でレポを作成しています。私の 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>

ここで説明するスクリプトを使用して、他の HTML ファイルをインポートできるようにしています。CSSは関係ないと思います。しかし、Github Pages ページを読み込むと、index.html の要素しか表示されません。ただし、ローカル ファイルからページを読み込むと、期待どおりに表示されるため、これは私のせいではありません。

画像:
オンライン: ローカル: 何が起こっているのか? Github で外部 JS を使用できませんか?オンライン
ローカル

編集:コンソールを確認したところ、次のメッセージが表示されました: エラー

4

1 に答える 1

3

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.

于 2016-10-27T19:17:18.783 に答える