当前位置：theitroad>Javascript 我可以直接从 GitHub 运行 HTML 文件，而不仅仅是查看它们的源代码吗？

Javascript 我可以直接从 GitHub 运行 HTML 文件，而不仅仅是查看它们的源代码吗？

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/6551446/
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-23 22:15:47 　来源:igfitidea点击:

Can I run HTML files directly from GitHub, instead of just viewing their source?

javascripthtmlgithub

提问by Domenic

If I have a .htmlfile in a GitHub repository, e.g. for running a a set of JavaScript tests, is there any way I can view that page directly—thus running the tests?

如果我.html在 GitHub 存储库中有一个文件，例如用于运行一组 JavaScript 测试，有什么方法可以直接查看该页面——从而运行测试？

For example, could I somehow actually see the test results that would be produced by the jQuery test suite, without downloading or cloning the repo to my local drive and running them there?

例如，我能否以某种方式实际看到jQuery 测试套件产生的测试结果，而无需将 repo 下载或克隆到我的本地驱动器并在那里运行它们？

I know this would basically put GitHub in the static content hosting business, but then again, they just have to change their mime-type from text/plainto text/html.

我知道这将基本上把GitHub上的静态内容托管业务，但话又说回来，他们只需要从改变自己的MIME类型text/plain来text/html。

回答by chmanie

You might want to use raw.githack.com. It supports GitHub, Bitbucket, Gitlab and GitHub gists.

您可能想使用raw.githack.com。它支持 GitHub、Bitbucket、Gitlab 和 GitHub gists。

GitHub

GitHub

Before:

前：

https://raw.githubusercontent.com/[user]/[repository]/[branch]/[filename.ext]

https://raw.githubusercontent.com/[user]/[repository]/[branch]/[filename.ext]

In your case .htmlextension

在你的情况下.html扩展

After:

后：

Development (throttled)

开发（节流）

https://raw.githack.com/[user]/[repository]/[branch]/[filename.ext]

https://raw.githack.com/[user]/[repository]/[branch]/[filename.ext]

Production (CDN)

生产 (CDN)

https://rawcdn.githack.com/[user]/[repository]/[branch]/[filename.ext]

https://rawcdn.githack.com/[user]/[repository]/[branch]/[filename.ext]

In your case .htmlextension

在你的情况下.html扩展

raw.githack.comalso supports other services:

raw.githack.com还支持其他服务：

Bitbucket

比特桶

Before:

前：

https://bitbucket.org/[user]/[repository]/raw/[branch]/[filename.ext]

https://bitbucket.org/[user]/[repository]/raw/[branch]/[filename.ext]

After:

后：

Development (throttled)

开发（节流）

https://bb.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

https://bb.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

Production (CDN)

生产 (CDN)

https://bbcdn.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

https://bbcdn.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

GitLab

GitLab

Before:

前：

https://gitlab.com/[user]/[repository]/raw/[branch]/[filename.ext]

https://gitlab.com/[user]/[repository]/raw/[branch]/[filename.ext]

After:

后：

Development (throttled)

开发（节流）

https://gl.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

https://gl.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

Production (CDN)

生产 (CDN)

https://glcdn.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

https://glcdn.githack.com/[user]/[repository]/raw/[branch]/[filename.ext]

GitHub gists

GitHub 要点

Before:

前：

https://gist.githubusercontent.com/[user]/[gist]/raw/[revision]/[filename.ext]

https://gist.githubusercontent.com/[user]/[gist]/raw/[revision]/[filename.ext]

After:

后：

Development (throttled)

开发（节流）

https://gist.githack.com/[user]/[gist]/raw/[revision]/[filename.ext]

https://gist.githack.com/[user]/[gist]/raw/[revision]/[filename.ext]

Production (CDN)

生产 (CDN)

https://gistcdn.githack.com/[user]/[gist]/raw/[revision]/[filename.ext]

https://gistcdn.githack.com/[user]/[gist]/raw/[revision]/[filename.ext]

Update: rawgit was discontinued

更新：rawgit 已停产

回答by niutech

There is a new tool called GitHub HTML Preview, which does exactly what you want. Just prepend http://htmlpreview.github.com/?to the URL of any HTML file, e.g. http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

有一个名为GitHub HTML Preview的新工具，它完全符合您的要求。只需添加http://htmlpreview.github.com/?任何 HTML 文件的 URL，例如http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

Note: This tool is actually a github.io page and is not affiliated with github as a company.

注意：这个工具实际上是一个 github.io 页面，不隶属于 github 作为一家公司。

回答by mraaroncruz

To piggyback on @niutech's answer, you can make a very simple bookmark snippet.
Using Chrome, though it works similarly with other browsers

要搭载@niutech 的回答，您可以制作一个非常简单的书签片段。
使用 Chrome，尽管它与其他浏览器的工作方式类似

  1. Right click your bookmark bar
  2. Click Add File
  3. Name it something like Github HTML
  4. For the URLtype javascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. When you're on a github file view page (not raw.github.com) click the bookmark link and you're golden.
  1. 右键单击您的书签栏
  2. 单击添加文件
  3. 将其命名为Github HTML之类的东西
  4. 对于URL类型javascript:top.location="http://htmlpreview.github.com/?"+document.URL
  5. 当您在 github 文件查看页面（不是 raw.github.com）上时，单击书签链接，您就大功告成了。

回答by Gianluca Esposito

You can either branch gh-pages to run your code or try this extension (Chrome, Firefox): https://github.com/ryt/githtml

您可以分支 gh-pages 来运行您的代码或尝试此扩展程序（Chrome、Firefox）：https: //github.com/ryt/githtml

If what you need are tests, you could embed your JS files into: http://jsperf.com/

如果你需要的是测试，你可以将你的 JS 文件嵌入到：http: //jsperf.com/

回答by Larry Battle

I had the same problem for my project Ratio.jsand here's what I did.

我的项目Ratio.js也遇到了同样的问题，这就是我所做的。

Problem:Github.com prevents files from rendering/executing when the source is viewed by setting the content type/MIME to plain text.

问题：Github.com 通过将内容类型/MIME 设置为纯文本来阻止文件在查看源时呈现/执行。

Solution:Have a web page import the files.

解决方案：让网页导入文件。

Example:

例子：

Use jsfiddle.netor jsbin.comto create a webpage online then save it. Navigate to your file in Github.com and click the 'raw' button to get the direct link to the file. From there, import the file using the appropriate tag and attribute.

使用jsfiddle.net或jsbin.com在线创建网页然后保存。在 Github.com 中导航到您的文件，然后单击“原始”按钮以获取文件的直接链接。从那里，使用适当的标签和属性导入文件。

<!DOCTYPE>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
    </head>
    <body>
        <h1 id="qunit-header">QUnit example</h1>
        <h2 id="qunit-banner"></h2>
        <div id="qunit-testrunner-toolbar"></div>
        <h2 id="qunit-userAgent"></h2>
        <ol id="qunit-tests"></ol>
        <div id="qunit-fixture">test markup, will be hidden</div>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>  
        <script type="text/javascript" src="https://raw.github.com/LarryBattle/Ratio.js/master/src/Ratio.js"></script>  
        <script type="text/javascript" src="https://raw.github.com/LarryBattle/Ratio.js/master/tests/js/Ratio-testcases.js"></script>  
    </body>
</html>

Live Demo: http://jsfiddle.net/jKu4q/2/

现场演示：http: //jsfiddle.net/jKu4q/2/

Note:Note for jsfiddle.net you can get direct access to the result page by adding showto the end of the url. Like so: http://jsfiddle.net/jKu4q/2/show

注意：对于 jsfiddle.net 的注意事项，您可以通过添加show到 url 的末尾来直接访问结果页面。像这样：http: //jsfiddle.net/jKu4q/2/show

Or....you could create a project page and render your HTML files from there. You can create a project page at http://pages.github.com/.

或者....您可以创建一个项目页面并从那里呈现您的 HTML 文件。您可以在http://pages.github.com/创建项目页面。

Once created you can then access the link through http://*accountName*.github.com/*projectName*/Example: http://larrybattle.github.com/Ratio.js/

创建后，您可以通过http://*accountName*.github.com/*projectName*/示例访问链接：http: //larrybattle.github.com/Ratio.js/

回答by James McGuigan

Here is a little Greasemonkey script that will add a CDN button to html pages on github

这是一个小 Greasemonkey 脚本，它将在 github 上的 html 页面中添加一个 CDN 按钮

Target page will be of the form: https://cdn.rawgit.com/user/repo/master/filename.js

目标页面将采用以下形式：https: //cdn.rawgit.com/user/repo/master/filename.js


// ==UserScript==
// @name        cdn.rawgit.com
// @namespace   github.com
// @include     https://github.com/*/blob/*.html
// @version     1
// @grant       none
// ==/UserScript==

var buttonGroup = $(".meta .actions .button-group");
var raw = buttonGroup.find("#raw-url");
var cdn = raw.clone();
cdn.attr("id", "cdn-url");
cdn.attr("href", "https://cdn.rawgit.com" + cdn.attr("href").replace("/raw/","/") );
cdn.text("CDN");
cdn.insertBefore(raw);

回答by ostrokach

You can do this easily by Modifying Response Headerswhich can be done with Chrome and Firefox extension like Requestly.

您可以通过修改响应标头轻松完成此操作，这可以使用 Chrome 和 Firefox 扩展程序（如Requestly ）完成。

In Chrome and Firefox:

在 Chrome 和 Firefox 中：

  1. Install Requestly for Chromeand Requestly for Firefox

  2. Add the following Headers Modification Rules:

    enter image description here

    a) Content-Type:

    • Modify
    • Response
    • Header: Content-Type
    • Value: text/html
    • Source Url Matches: /raw\.githubusercontent\.com/.*\.html/


    b) Content-Security-Policy:

    • Modify
    • Response
    • Header: Content-Security-Policy
    • Value: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • Source Url Matches: /raw\.githubusercontent\.com/.*\.html/

  1. 安装Requestly for Chrome和Requestly for Firefox

  2. 添加以下标题修改规则：

    在此处输入图片说明

    a)内容类型：

    • 调整
    • 回复
    • 标题： Content-Type
    • 价值： text/html
    • 源网址匹配： /raw\.githubusercontent\.com/.*\.html/


    b)内容安全策略：

    • 调整
    • 回复
    • 标题： Content-Security-Policy
    • 价值： default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
    • 源网址匹配： /raw\.githubusercontent\.com/.*\.html/

回答by Shimon Doodkin

i wanted to edit html and js in github and have a preview. i wanted to do it in github to have instant commits and saves.

我想在 github 中编辑 html 和 js 并进行预览。我想在 github 中进行即时提交和保存。

tried rawgithub.com but rawgithub.com was not realtime (it's cache refreshes once a minute).

尝试过 rawgithub.com 但 rawgithub.com 不是实时的（它的缓存每分钟刷新一次）。

so i quickly developed my own solution:

所以我很快开发了自己的解决方案：

node.js solution for this: https://github.com/shimondoodkin/rawgithub

node.js 解决方案：https: //github.com/shimondoodkin/rawgithub

回答by Ami Ahmad Touseef

raw.github.com/user/repository is no longer there

raw.github.com/user/repository不再存在

To link, href to source code in github, you have to use github link to raw source this way:

要链接，href 到 github 中的源代码，您必须以这种方式使用 github 链接到原始源代码：

raw.githubusercontent.com/user/repository/master/file.extension

raw.githubusercontent.com/user/repository/master/file.extension

EXAMPLE

例子

<html>
...
...
<head>    
<script src="https://raw.githubusercontent.com/amiahmadtouseef/tutorialhtmlfive/master/petdecider/script.js"></script>
...
</head>
<body>
...
</html>

回答by sujithuix

If you have an angular or react project in github, you can use https://stackblitz.com/to run the application online in your browser.

如果你在 github 中有 angular 或 react 项目，你可以使用https://stackblitz.com/在浏览器中在线运行应用程序。

Enter your Github username and repository name to view the application online - stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

输入您的 Github 用户名和存储库名称以在线查看应用程序 - stackblitz.com/github/{GITHUB_USERNAME}/{REPO_NAME}

This works even without Node_Modules uploaded to Github

即使没有将 Node_Modules 上传到 Github，这也能正常工作

Currently support projects using @angular/cli and create-react-app. Support for Ionic, Vue, and custom webpack configs are coming soon!

目前支持使用@angular/cli 和 create-react-app 的项目。即将支持 Ionic、Vue 和自定义 webpack 配置！

相关推荐

Javascript 哪些限制适用于不透明响应？

Javascript 哪些限制适用于不透明响应？

Javascript 如何根据 Windows 或 Unix 为“换行样式”编写 ESLint 规则？

Javascript 如何根据 Windows 或 Unix 为“换行样式”编写 ESLint 规则？

有没有办法在外部 javascript 文件中使用“<%= someObject.ClientID %>”？

有没有办法在外部 javascript 文件中使用“<%= someObject.ClientID %>”？

Javascript 如何防止 Axios 对我的请求参数进行编码？

Javascript 如何防止 Axios 对我的请求参数进行编码？

相关推荐
最近更新
标签