将GitHub中的JavaScript文件包含在HTML页面中

Question

请注意!

在此更改后,您无法直接从Github包含Github脚本.

我们X-Content-Type-Options: nosniff在2011年将标题添加到我们的原始URL响应中,这是打击热链接的第一步.这具有强制浏览器根据Content-Type标题处理内容的效果.这意味着当我们设置Content-Type: text/plain文件的原始视图时,浏览器将拒绝将该文件视为JavaScript或CSS.

但也有其他选择.检查我对这个问题的回答.

---

我试图将GitHub中的JavaScript文件包含到本地HTML文件中进行测试(如在互联网上找到的图像:) <img src="http://...">.

我想要这样的东西:

<script src="https://github.com/[username]/[repository]/blob/master/public/[fileName].js"></script>

问题是这不起作用.

我怎样才能做到这一点？

Answer 1

您可以使用类似于此的URL来执行此操作:

https://rawgit.com/h5bp/html5-boilerplate/master/src/js/plugins.js

请注意,这与单击GitHub中的"原始"按钮不同; 该按钮还将为您提供该文件的干净版本,但它将使用错误的标题发送.

一句警告; 该文件不是由GitHub提供的.它正在通过rawgit.com域重定向.正如https://rawgit.com所述:

嘿! rawgit.com只是为了好玩,并且不以任何方式与GitHub相关联.

请记住,该域名的所有者现在在流量控制和能够操纵它,因为他们认为合适的.

在生产中使用此URL:

https://cdn.rawgit.com/user/repo/tag/file

Answer 2

启用存储库的 GitHub 页面后，使用以下链接：

<script src="https://[username].github.io/[repository]/[filename].js"></script>

Answer 3

更新的答案：

我在 2014 年给出的旧答案已停止工作，但您可以使用第 3 方 CDN 直接从 github 提供 js。Jsdelivr 是其中之一，由 CloudFlare 和 Fastly 提供支持。

例子：

<script src="https://cdn.jsdelivr.net/gh/<user>/<repo>/<filename>.js">

或者使用他们的工具进行转换： https: //www.jsdelivr.com/github

旧答案：

即使 github 最近发生了变化，这仍然有效：

<script>
  $.getScript("https://raw.github.com/username/repo/master/src/script.js");
</script>

附言。需要 jQuery。

Answer 4

rawgit 看起来像是在 2019 年底关闭，

使用适当的 Content-Type 标头传送内容的一些选项。

1. https://raw.githack.com/ , https://combinatronics.com= >exact 替代但它不能用于从客户端 javascript 获取，因为这里启用了 cors。
2. jsdelivr => 用于传递 javascript 文件

Answer 5

这应该工作:

<script src="https://raw.github.com/[username]/[repository]/[branch]/[filename].js"></script>

以下是如何将您重定向到github中所需的地址:

Answer 6

您可以在GITHUB 页面中包含托管的CSS、HTML和JS文件

只需单击 github 存储库上的设置，然后在此选项卡中向下滚动到 GitHub 页面并使用下拉列表进行选择

然后 HOray 您现在可以实时访问它

这是返回文本/纯 mime 类型的原始数据

https://raw.githubusercontent.com/bdalina54/bdalina54.github.io/master/assets/js/terebra/acrior.js

<script src="https://raw.githubusercontent.com/bdalina54/bdalina54.github.io/master/assets/js/terebra/acrior.js"></script>

这是现场版本

https://bdalina54.github.io/assets/js/terebra/acrior.js

<script src="https://bdalina54.github.io/assets/js/terebra/acrior.js"></script>

你可以查看我的截图，我是如何做到的

https://prnt.sc/obbrpn

https://prnt.sc/obbt69

https://prnt.sc/obbskb