어드민, Author at 리뷰나라

[javascript] 소스를 보지 않고 GitHub에서 HTML 파일을 직접 실행할 수 있습니까?

JAVASCRIPT / 글쓴이 어드민

나는이있는 경우 .htmlGitHub의 저장소에 파일을 자바 스크립트 테스트 AA 세트를 실행하는, 내가 테스트를 실행 직접, 따라서 해당 페이지를 볼 수있는 방법이 예를 들면?

예를 들어, 어떻게 든 실제로 테스트 결과를 볼 수 있습니까? 리포지토리를 로컬 드라이브로 다운로드하거나 복제하지 않고 jQuery 테스트 스위트 에서 있습니까?

이것이 기본적으로 정적 콘텐츠 호스팅 비즈니스에 GitHub를 넣을 것이라는 것을 알고 있지만 다시 mime 유형을에서 text/plain로 변경해야 합니다 text/html.

답변

raw.githack.com 을 사용하고 싶을 수도 있습니다 . GitHub, Bitbucket, Gitlab 및 GitHub 요점을 지원합니다.

깃 허브

전에:

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

귀하의 경우 .html연장

후:

개발

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

생산 (CDN)

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

귀하의 경우 .html연장

raw.githack.com 은 다른 서비스도 지원합니다 :

비트 버킷

전에:

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

후:

개발

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

생산 (CDN)

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

GitLab

전에:

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

후:

개발

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

생산 (CDN)

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

GitHub 요점

전에:

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

후:

개발

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

생산 (CDN)

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

업데이트 : rawgit이 중단되었습니다

답변

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와 관련이 없습니다.

답변

@niutech의 답변을 피기 백하기 위해 매우 간단한 북마크 스 니펫을 만들 수 있습니다.
다른 브라우저와 비슷하게 작동하지만 Chrome 사용

북마크 바를 마우스 오른쪽 버튼으로 클릭
파일 추가를 클릭 하십시오
Github HTML 과 같은 이름을 지정하십시오.
에 대한 URL의 유형javascript:top.location="http://htmlpreview.github.com/?"+document.URL
raw.github.com이 아닌 github 파일보기 페이지에있을 때 책갈피 링크를 클릭하면 황금색입니다.

답변

gh-pages를 분기하여 코드를 실행하거나이 확장 (Chrome, Firefox)을 시도해보십시오 :
https://github.com/ryt/githtml

테스트가 필요한 경우 JS 파일을 http://jsperf.com/에 포함시킬 수 있습니다.

답변

내 프로젝트 Ratio.js에 대해 동일한 문제가 있었고 여기에 내가 한 일이 있습니다.

문제 :
Github.com은 컨텐츠 유형 / MIME을 일반 텍스트로 설정하여 소스를 볼 때 파일 렌더링 / 실행을 방지합니다.

솔루션 :
웹 페이지에서 파일을 가져 오십시오.

예:

사용 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/

답변

다음은 github의 html 페이지에 CDN 버튼을 추가하는 Greasemonkey 스크립트입니다.

대상 페이지는 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);

답변

Requestly 와 같은 Chrome 및 Firefox 확장 프로그램으로 수행 할 수있는 응답 헤더 를 수정 하면 쉽게 수행 할 수 있습니다 .

Chrome 및 Firefox에서 :

설치 크롬에 대한 Requestly 및 Firefox 용 Requestly
다음 헤더 수정 규칙을 추가하십시오 .

a) 컨텐츠 유형 :
- 수정
- 응답
- 헤더: Content-Type
- 값: text/html
- 소스 URL 일치 : /raw\.githubusercontent\.com/.*\.html/
b) 콘텐츠 보안 정책 :
- 수정
- 응답
- 헤더: Content-Security-Policy
- 값: default-src 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-eval';
- 소스 URL 일치 : /raw\.githubusercontent\.com/.*\.html/