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

时间:2012-12-25 19:06:22

标签: javascript github

  

注意!

     

this change之后,您无法直接从Github 添加Github脚本。

     

我们在2011年将原始网址回复添加了X-Content-Type-Options: nosniff标头作为打击热链接的第一步。这会强制浏览器根据Content-Type标题处理内容。这意味着当我们为文件的原始视图设置Content-Type: text/plain时,浏览器将拒绝将该文件视为JavaScript或CSS。

     

但也有其他选择。 检查my answer to this question


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

我想要这样的事情:

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

问题是这不起作用。

我该怎么做?

7 个答案:

答案 0 :(得分:52)

您可以使用与此类似的网址来执行此操作:

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

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


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

  

喂! rawgit.com只是为了好玩而且与任何GitHub无关   方式。

请注意,该域的所有者现在可以控制流量和 能够按照自己的意愿操纵它。


在制作中使用此网址:

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

答案 1 :(得分:6)

这应该有效:

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

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

enter image description here

答案 2 :(得分:2)

即使使用github最近的更改,这仍然有效:

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

PS。需要jQuery。

答案 3 :(得分:0)

尝试这样的事情:

<html>
<head>
    <script src="https://raw.github.com/e0ne/BlogSamples/master/ModalDialog/AdvancedPopup/jquery.min.js"></script>
</head>

这对我有用

答案 4 :(得分:0)

  

原始人似乎要在2019年底前关闭

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

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

答案 5 :(得分:0)

您可以在 GITHUB页面

中包含托管的 CSS HTML JS 文件。

只需单击github存储库上的设置 然后在此选项卡上向下滚动到GitHub Pages并选择下拉菜单

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

  

这是返回文本/纯文字类型的原始文件

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

答案 6 :(得分:0)

启用存储库的GitHub页面后,使用以下链接:

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