将来自 GitHub 的 JavaScript 文件包含到 HTML 页面中

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14033281/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 15:30:00  来源:igfitidea点击:

Including JavaScript files from GitHub into HTML pages

javascriptgithub

提问by Ionic? Biz?u

PAY ATTENTION!

You can't include Github scripts directly from Githubafter this change.

We added the X-Content-Type-Options: nosniffheader to our raw URL responses way back in 2011 as a first step in combating hotlinking. This has the effect of forcing the browser to treat content in accordance with the Content-Typeheader. That means that when we set Content-Type: text/plainfor raw views of files, the browser will refuse to treat that file as JavaScript or CSS.

But there are alternatives. Check my answer to this question.

请注意!

此更改后,您不能直接从 Github 包含 Github 脚本

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

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



I am trying to include a JavaScript file from GitHub into a local HTML file for testing (like an image found on the internet: <img src="http://...">).

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

I would like something like this:

我想要这样的东西:

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

The problem is that this doesn't work.

问题是这行不通。

How can I do this?

我怎样才能做到这一点?

采纳答案by Lix

You will be able to do it with a URL similar to this:

您将能够使用类似于此的 URL 来执行此操作:

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

Note that this is not the same as clicking on the "raw" button within GitHub; that button will also give you a clean version of the file, but it will be sent with the wrong headers.

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



A Word of warning; the file is not not being served from GitHub. It is being redirected through the rawgit.comdomain. As is stated on https://rawgit.com:

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

Hey! rawgit.com is just for fun and is not associated with GitHub in any way.

嘿!rawgit.com 只是为了好玩,与 GitHub 没有任何关联。

Keep in mind that the owner of that domain is now in control of the traffic and is able to manipulate it as they see fit.

请记住,该域的所有者现在可以控制流量,并且能够按照他们认为合适的方式操纵它。

回答by CoffeeCode

This should work:

这应该有效:

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

Here is how you can get redirected to the needed address in github:

以下是重定向到 github 中所需地址的方法:

enter image description here

在此处输入图片说明

回答by Shishir Arora

rawgit looks like shutting down by end of 2019,

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

some options for delivering content with with proper Content-Type headers.

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

  1. https://raw.githack.com/, https://combinatronics.com=>exact alternative but it cannot be used for fetching from client side javascript, as cors is enabled here.
  2. jsdelivr =>for delivering javascript files
  1. https://raw.githack.com/, https://combinatronics.com=>exact 替代但它不能用于从客户端 javascript 获取,因为这里启用了 cors。
  2. jsdelivr => 用于传送 javascript 文件

回答by Alex

This works even with github's recent change:

这甚至适用于 github 最近的更改:

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

PS. requires jQuery.

附注。需要jQuery。

回答by Chintan Patel

After enabling GitHub pages of your Repository, use following link:

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

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

回答by bdalina

You can include hosted CSS, HTMLand JSfile in GITHUB PAGES

您可以在GITHUB PAGES 中包含托管的CSSHTMLJS文件

Just click at the settings on your github repository then at this tab scroll down to the GitHub Pages and select with the dropdown

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

Then HOray you can now access it live

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

This is the raw that returns text/plain mime type

这是返回 text/plain mime 类型的原始数据

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

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>

And this is the live version

这是现场版

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

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

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

You can check my screenshot how I did it

你可以查看我的截图我是怎么做的

https://prnt.sc/obbrpn

https://prnt.sc/obbrpn

https://prnt.sc/obbt69

https://prnt.sc/obbt69

https://prnt.sc/obbskb

https://prnt.sc/obbskb

回答by Ivan Kolodyazhny

Try somethig like this:

尝试这样的事情:

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

It's working for me

它对我有用