javascript - 更改为 JavaScript 文件后无法链接图标

Question

在我的本地目录上，一切正常。我有一个创建网站图标和链接 style.css 的 JavaScript 文件。在脚本标签中，没有任何作用。这些是可以找到原始代码的地方，但它们都不起作用:

• > https://rawgit.com/KnowledgeableKangaroo/KnowledgeableKangaroo.github.io/dcd2ad44389211152adad1e8f4d3009b8010a665/script.js
• > https://cdn.rawgit.com/KnowledgeableKangaroo/KnowledgeableKangaroo.github.io/dcd2ad44389211152adad1e8f4d3009b8010a665/script.js
• > https://rawgit.com/KnowledgeableKangaroo/KnowledgeableKangaroo.github.io/master/script.js
• > https://cdn.rawgit.com/KnowledgeableKangaroo/KnowledgeableKangaroo.github.io/master/script.js

我使用了第三个，但是一旦我对 script.js 进行了更改，一切都崩溃了!基本上，在我的 script.js 中，我链接到与存储库相关的 favicon，并使用 createElement 和属性相对链接 style.css 文件，并将其附加到头部。

const link = top.document.createElement("link");
link.type = "image/x-icon";
link.rel = "shortcut icon";
link.href = "./icon.ico";
top.document.querySelector("head").appendChild(link);

const stylesheetLink = top.document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "./style.css";
top.document.querySelector("head").appendChild(link);

console.log("The style was linked and the favicon was added.");

一切正常，直到我添加第二部分 - 链接 style.css - 并且，由于它们是通过分支(不推荐)连接的，所以 favicons 消失了。

为什么会发生这种情况，我该如何解决？分支链接不起作用，因为它们是永久缓存的，但是提交哈希链接呢？

9/19/2018

现在我正在使用 CDN 和提交的第二个链接，但上面的代码仍然不起作用。我还有另外两个函数，goToHomePage() 和 goBack()，它们工作正常。当我在等效的 HTML 文件中运行 Sublime Text 3 时，一切都在本地运行。出现图标。为什么它在本地有效但在 GitHub Pages 上无效？

9/20/2018

我添加了一个调试 console.log() 声明

The style was linked and the favicon was added.

更新我的一个存储库的提交并推送后，它打印出来了!所以，事实是

• 其他功能正常
• Console.log 语句出现
• 在更改 script.js 之前一切正常。
• 更改 script.js 后，通过 script.js 链接的网站图标消失了
• 通过检查网页上的元素并添加网站图标作品来手动添加它

我推断出问题所在

• 不在文件的原始代码中，因为日志功能有效
• 通过创建链接元素 - 我一直在 top.document 和 document 之间切换，但通过控制台我发现它们完全相同

Answer 1

在第二部分 - 样式表的链接中，link 变量再次被追加，而应该追加的是 stylesheetLink 变量。在 MCVE 的最后一行，将 .appendChild(link) 更改为 .appendChild(stylesheetLink)。

此外，您可以只执行 cdn.rawgit.com/KnowledgeableKangaroo/KnowledgeableKangaroo.github.io/master/script.js。只要您使用 CDN，该分支就可以正常工作。