当托管在Github页面上时，脚本停止工作

Question

我构建了一个随机句子生成器——当你点击一个HTML按钮时，它下面会生成一个随机句子。生成由一个简单的脚本和jQuery支持。

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

但一旦我上传到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页面上不工作？

Answer 1

今天我看到了一个类似的问题，但不是因为HTTP/HTTPS：当我发布到GitHub页面时，源HTML中的所有CR/LF字符都被删除了。对于带有结束标记的HTML来说，这可能不是什么大问题，但是当整个源页面（包括JavaScript）都在一行时，JavaScript中的任何嵌入注释都会导致所有代码（直到JavaScript结束标记）意外地被注释掉。

在这种情况下，更多的代码被视为注释：

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

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

推送到GitHub后，CR/LF明显被GH Pages操作移除：

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

（有些不受欢迎的）解决方案是删除注释或者更好：在行的开头使用/*和*/注释包装器，而不是//。

• 编辑：根本原因似乎是布局：压缩；看见https://github.com/jekyll/jekyll/issues/8660

Answer 2

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

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

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

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

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

只需更改

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