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

Question

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

Dom*_*nic 294 html javascript github

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

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

我知道这基本上会把GitHub放在静态内容托管业务中,但话又说回来,他们只需要将他们的mime类型text/plain改为text/html.

Answer 1

chm*_*nie 352

您可能想要使用jsDelivr:

之前:

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

在您的案例.html扩展名中

后:

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

在您的案例https://rawcdn.githack.com/[user]/[repository]/[branch]/[filename.ext]扩展名中

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

可悲的是,不支持要点.

更新:rawgit已停产

仅仅是一个FYI:由于显而易见的原因,这似乎根本不适用于私人回购. (13认同)
那么,它如何与私有存储库一起使用？ (4认同)

Answer 2

niu*_*ech 192

有一个名为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

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

缺点:它只适用于公共回购.:-( (9认同)
它正确加载相对路径,允许链接到github存储库内的JS/CSS.这是太棒了. (3认同)
谢谢,正是我希望找到的. (2认同)
私人回购也可以吗？ (2认同)

Answer 3

mra*_*ruz 17

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

右键单击书签栏
单击添加文件
将其命名为Github HTML
对于URL类型javascript:top.location="http://htmlpreview.github.com/?"+document.URL
当你在github文件视图页面(而不是raw.github.com)上时,单击书签链接,你就是金色的.

Answer 4

Gia*_*ito 7

您可以分支gh页面来运行您的代码或尝试此扩展程序(Chrome,Firefox):https: //github.com/ryt/githtml

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

Answer 5

Lar*_*tle 6

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

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

解决方案: 让网页导入文件.

例:

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

Run Code Online (Sandbox Code Playgroud)

现场演示: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/

归档时间：	14 年，5 月前
查看次数：	125149 次
最近记录：	6 年，8 月前