GitHub & BitBucket HTML Preview

许多 GitHub 仓库并未使用 GitHub Pages 来托管其 HTML 文件。GitHub & BitBucket HTML Preview 可让您在不克隆或下载整个仓库的情况下预览这些文件。这是一个客户端解决方案，不涉及任何第三方托管服务器（除使用 Yahoo! Query Language 获取资源外）。

如果您尝试直接在浏览器中打开 GitHub 上任意 HTML、CSS 或 JS 文件的原始版本，您只会看到源代码。GitHub 强制这些文件使用 "text/plain" 内容类型，因此无法被解析。此脚本通过使用 Yahoo! Query Language 来覆盖该设置。

要使用它，只需在任意 HTML 文件的 URL 前添加以下片段：http://htmlpreview.github.io/? 例如： http://htmlpreview.github.io/?https://github.com/twbs/bootstrap/gh-pages/2.3.2/index.html
http://htmlpreview.github.io/?https://github.com/documentcloud/backbone/blob/master/examples/todos/index.html

其工作原理是通过 YQL 加载 HTML，然后处理所有链接、框架、脚本和样式，并通过 YQL 加载每一项，以便在浏览器中执行。工作流程如下： HTMLPreview.init() -> HTMLPreview.send(HTML) -> YQL 获取 HTML -> HTMLPreview.loadHTML(data) -> HTMLPreview.replaceAssets() -> HTMLPreview.send(CSS) -> YQL 获取 CSS -> HTMLPreview.loadCSS(data) -> HTMLPreview.send(JS) -> YQL 获取 JS -> HTMLPreview.loadJS(data)

GitHub & BitBucket HTML Preview 已在 Google Chrome、Apple Safari 和 Mozilla Firefox 上测试过，应能正常运行于大多数网站，而不仅限于 GitHub 与 BitBucket。