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

Question

我构建了一个随机句子生成器——当你点击一个 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 Pages 上不起作用？

Answer 1

如果您打开开发人员工具窗格（在 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>

Answer 2

大小写是您的网址的HTTP。您需要通过HTTPS而不是HTTP来更改脚本.Github Pages通过HTTPS托管文件是为了为您提供安全的连接。请始终使用HTTPS。

Answer 3

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

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

问题描述

2 个解决方案

解决方案1
8 已采纳 2016-08-13 15:48:44

解决方案2
0 2019-10-20 02:25:29

解决方案3
0 2021-04-30 23:43:46

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

问题描述

2 个解决方案

解决方案1 8 已采纳 2016-08-13 15:48:44

解决方案2 0 2019-10-20 02:25:29

解决方案3 0 2021-04-30 23:43:46

解决方案1
8 已采纳 2016-08-13 15:48:44

解决方案2
0 2019-10-20 02:25:29

解决方案3
0 2021-04-30 23:43:46