托管在 Github Pages 上时脚本停止工作答案

【问题标题】：Script stops working when hosted on Github Pages托管在 Github Pages 上时脚本停止工作
【发布时间】：2016-12-20 07:03:44
【问题描述】：

我构建了一个随机句子生成器——当您单击一个 HTML 按钮时，会在其下方生成一个随机句子。生成由一个简单的脚本和 jQuery 提供支持。

它在我的本地机器上运行良好：当我在浏览器中打开 index.html 时，一切都很顺利。

但是，一旦我上传到 GiHub 并访问 GitHub 页面 URL，生成器就会停止工作。点击按钮什么都不做。

这是脚本（全部包含在 index.html 文件中）：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

和

<script> function sentenceLoad() {

    //declare arrays
    var nouns = ['Mulder, Scully, and']; 
    var names = ['Assistant Director Skinner', 'the Cigarette Smoking Man', 'Alex Krycek'];
    var actions = ['are running from alien bounty hunters', 'are tracking a shapeshifter', 'are hunting a mutant serial killer'];   
    var places = ['in the woods of New Jersey', 'in a government bunker', 'in Olympic National Forest'];       
    //shuffle through contents of each array, picking one entry per array
    var randNoun = nouns[Math.floor(Math.random() * nouns.length)];
    var randName = names[Math.floor(Math.random() * names.length)];
    var randAction = actions[Math.floor(Math.random() * actions.length)];
    var randPlace = places[Math.floor(Math.random() * places.length)];
    //place the random entry into the appropriate place in the HTML
    jQuery("h5").html("");
    jQuery("h5").append(randNoun + "&nbsp;");
    jQuery("h5").append(randName + "&nbsp;");
    jQuery("h5").append(randAction + "&nbsp;");
    jQuery("h5").append(randPlace);
}

什么会导致它在本地工作，但不能在 Github 页面上工作？

【问题讨论】：

检查控制台是否有错误
你能发布 GitHub Pages 网址吗？
Blocked loading mixed active content的可能重复

标签： javascript jquery html

【解决方案1】：

今天我看到了一个类似的问题，但不是因为 HTTP/HTTPS：当我发布到 GitHub 页面时，源 HTML 中的所有 CR/LF 字符都被删除了。也许对于带有结束标签的 HTML 来说没什么大不了的，但是当整个源页面在一行上时，包括 JavaScript，好吧 - JavaScript 中的任何嵌入式 cmets 都会导致之后的所有代码（直到 JavaScript 结束标签）居然也被注释掉了。

在这种情况下，some more code 被视为评论：

    code...
    // a comment
    some more code...

这是一个例子。之前，在编辑器中查看：

推送到 GitHub 后，CR/LF 显然被 GH-Pages 操作删除：

注意注释后所有剩余的 JavaScript 是如何被禁用的::

（有些不受欢迎的）解决方案是删除评论或更好：在行首使用 /* 和 */ 评论包装而不是 //。

编辑：根本原因似乎是layout: compress；见https://github.com/jekyll/jekyll/issues/8660

【讨论】：

【解决方案2】：

如果您打开开发者工具窗格（在 Chrome 中，右键单击页面并选择检查），您将在网络控制台中看到此错误：

混合内容：“https://bobbyfestgenerator.github.io/”处的页面通过 HTTPS 加载，但请求了不安全的脚本“http://code.jquery.com/jquery-1.10.1.min.js”。此请求已被阻止；内容必须通过 HTTPS 提供。

您需要通过 HTTPS 而不是 HTTP 加载脚本。

这在本地工作的原因是因为您在本地计算机上使用file:// 方案（如果您有本地开发服务器，则使用http://）。在这种情况下，浏览器通过 HTTP 加载外部脚本没有问题。

但是，Github Pages 会通过 HTTPS（安全连接）为您托管您的文件。出于安全原因，如果页面托管在 HTTPS 上，浏览器将不会通过 HTTP 加载脚本。

只需更改 <head> 标记中的代码以通过 HTTPS 加载脚本：

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

【讨论】：

@LankArnold 乐于助人！控制台是检查此类内容的第一个地方。顺便说一句，如果这是一个有用的答案，除了接受之外，您还可以投票。 :)
或者使用与当前页面相同的加载方案，通过从 URL 中省略方案：<script src="//code.jquery.com/..." />