60

注意！

在此更改之后，您不能直接从 Github 包含 Github 脚本。

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

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

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

我想要这样的东西：

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

问题是这行不通。

我怎样才能做到这一点？

4

9 回答 9

54

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

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

请注意，这与单击 GitHub 中的“原始”按钮不同；该按钮还会为您提供文件的干净版本，但发送时会带有错误的标题。

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

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

请记住，该域的所有者现在可以控制流量，并且能够在他们认为合适的时候对其进行操作。

于 2012-12-25T19:11:04.947 回答
9

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

<script src="https://[username].github.io/[repository]/[filename].js"></script>
于 2019-08-09T15:10:31.400 回答
7

rawgit 看起来要在 2019 年底关闭，

使用正确的 Content-Type 标头交付内容的一些选项。

  1. https://raw.githack.com/ , https://combinatronics.com= >exact 替代方案，但它不能用于从客户端 javascript 获取，因为此处启用了 cors。
  2. jsdelivr => 用于传递 javascript 文件
于 2019-02-16T15:53:09.487 回答
4

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

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

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

这是返回 text/plain mime 类型的 raw

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

于 2019-07-06T08:56:38.300 回答
3

这应该有效：

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

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

在此处输入图像描述

于 2012-12-25T19:13:45.567 回答
2

更新答案：

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

例子：

<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>

PS。需要 jQuery。

于 2014-12-26T07:32:15.713 回答
0

尝试这样的事情：

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

它对我有用

于 2012-12-25T19:15:00.210 回答
0

2021 年工作解决方案：使用组合数学。

有关示例，请参见此答案。在这里快速复制一个：

raw.github.com唯一的变化是combinatronics.com：

<script
  type="text/javascript"
  src="https://combinatronics.com/username/repo/master/src/file.js"
></script>
于 2021-09-10T10:38:34.553 回答
0

你可以使用GitHub 提供的 API获取所有的上下文，然后使用类似于 的方法eval强制写入。

我不建议你在任何官方产品中使用这种方式，但是作为测试或者写一些练习脚本，得心应手，可以省去很多重复代码

Docs GitHub API 获取内容

脚本和示例

我创建了一个组件，允许您将文件拖到输入。

https://api.github.com/repos/CarsonSlovoka/excel/contents/app/urls/static/js/pkg/input/ask-file.js ? ref = d625296 _ _ _

下面将向您展示如何加载内容并将其嵌入以便您可以使用它。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
      integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
      crossorigin="anonymous" referrerpolicy="no-referrer"/>
<!--  Above CSS are not must be given, I want it more pretty, that all. -->

<input data-com="ask-file" placeholder="select or drag the file to attach" multiple>    

<script type="module">
  function GithubExplorer() {

    /**
     * @param {string} owner Username
     * @param {string} repo repository name
     * @param {string} path filepath
     * @param {string} branch  branch name or SHA1
     * @param {string} token The token is used for project private. generate new token  https://github.com/settings/tokens
     * */
    this.Query = async (owner, repo, path, {branch = "master", token = undefined}) => {
      // https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#supplying_request_options
      const url = `https://api.github.com/repos/${owner}/${repo}/contents/${path}?ref=${branch}`
      const headers = {
        accept: "application/vnd.github.v3.raw",
      }
      if (token) {
        headers["authorization"] = `token ${token}`
      }
      const response = await fetch(url, {
        method: 'GET',
        headers,
      })
      if (!response.ok) {
        const errMsg = await response.text()
        throw Error(`${response.statusText} (${response.status}) | ${errMsg} `)
      }
      return await response.blob()
    }
  }

  (async () => {
    const github = new GithubExplorer()
    const blobAskFileScript = await github.Query("CarsonSlovoka", "excel", "app/urls/static/js/pkg/input/ask-file.js", {branch: "d625296"})
    let askFileScriptText = await blobAskFileScript.text()
    askFileScriptText = askFileScriptText.replaceAll("export class AskInputFile", "class AskInputFile")
    document.querySelector(`head`).append(
      document.createRange().createContextualFragment(`
      <script>${askFileScriptText}<\/script>`)
    )
    AskInputFile.BuildAll() // This function is from the script.
  })()
</script>

下面是一个简单的脚本，您知道在加载内容后该怎么做。

const body = document.querySelector(`body`)
const range = document.createRange()
const content = `<script>console.log("hello world")<\/script>`
const frag = range.createContextualFragment(content)
body.append(frag)

于 2021-09-08T03:13:50.070 回答