首页 文章

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

提问于
浏览 次
279

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

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

我知道这基本上会把GitHub放在静态内容托管业务中，但是再一次，他们只需要将他们的mime类型从text/plain更改为 text/html .

javascript html github

11 回答

  • 1

    为了搭上@niutech的答案，你可以制作一个非常简单的书签片段 .
    使用Chrome，虽然它与其他浏览器的工作方式类似

    • 右键单击书签栏

    • 点击 Add File

    • 将其命名为 Github HTML

    • 对于 URL 类型 javascript:top.location="http://htmlpreview.github.com/?"+document.URL

    • 当你在github文件视图页面（而不是raw.github.com）上时，单击书签链接，你就是金色的 .

    回复于
  • 2

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

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

    回复于
  • 4

    您可能想要使用jsDelivr：

    之前：

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

    在你的情况下 .html 扩展名

    之后：

    https://cdn.jsdelivr.net/gh/[user]/[repository]@[branch]/[filename.ext]

    在您的情况下 .html 扩展名

    您可以想象，甚至鼓励您将其用作文件的CDN .

    可悲的是，不支持要点 .

    Update: rawgit was discontinued

    回复于
  • 339

    有一个名为GitHub HTML Preview的新工具，可以完全按照您的要求进行操作 . 只需将 http://htmlpreview.github.com/? 添加到任何HTML文件的网址，例如http://htmlpreview.github.com/?https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html

    注意：此工具实际上是一个github.io页面，并且不与github作为公司关联 .

    回复于
  • 16

    我的项目Ratio.js也有同样的问题，这就是我的所作所为 .

    Problem: Github.com通过将内容类型/ MIME设置为纯文本来防止在查看源时呈现/执行文件 .

    Solution: 让网页导入文件 .

    Example:

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

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

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

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

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

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

    回复于
  • 3

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

    目标页面的格式为：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);
    回复于
  • 6

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

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

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

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

    回复于
  • 1

    您可以通过 Modifying Response Headers 轻松完成此操作，这可以通过Chrome和Firefox扩展程序（如Requestly）完成 .

    在Chrome和Firefox中：

    enter image description here

    a）内容类型：

    • 修改

    • 回复

    • Headers ： Content-Type

    • Value ： text/html

    • 来源网址匹配项： /raw\.githubusercontent\.com/.*\.html/

    b）内容安全政策：

    • 修改

    • 回复

    • Headers ： Content-Security-Policy

    • Value ： default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';

    • 来源网址匹配项： /raw\.githubusercontent\.com/.*\.html/

    回复于
  • 3

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

    要链接，href到github中的源代码，你必须使用github链接到原始源：

    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>
    回复于
  • 7

    此解决方案仅适用于Chrome浏览器 . 我不确定其他浏览器 .

    • 在Chrome浏览器中添加"Modify Content-Type Options"扩展名 .

    • 在浏览器中打开"chrome-extension://jnfofbopfpaoeojgieggflbpcblhfhka/options.html" url .

    • 添加原始文件URL的规则 . 例如：

    • 网址过滤：https：///raw/master//fileName.html

    • 原始类型：text / plain

    • 替换类型：text / html

    • 打开您在规则中添加网址的文件浏览器（在步骤3中） .

    回复于
  • 186

    如果您在github中有角度或反应项目，则可以使用https://stackblitz.com/在浏览器中在线运行应用程序 .

    输入你的Github用户名和存储库名称可在线查看应用程序 - stackblitz.com/github//

    即使没有将Node_Modules上传到Github，这也可以工作

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

    回复于

相关问题