Javascript在Github'；中未按预期工作；htmlpreview

我在Github（）中有一个项目，我正在HTMLPreview（）中预览它，我一生都不明白为什么它在我的Mac上本地工作，而不是通过HTMLPreview。 这是一个使用jQuery用HTML和Javascript编写的简单项目：基本上，使用鼠标在网格的正方形中着色。它可以改变颜色，改变网格大小等等。有两个问题：

当第一次加载页面时，而不是创建一个16x16的网格，它似乎是加倍的，所以它会从屏幕底部运行。按“新建”按钮可正确绘制

我截取键，甚至切换暂停着色时，p按下。这在此刻根本不起作用，所以它无法画画——本质上它仍然处于暂停状态

暂时忽略（1），对于（2），这是相关代码：

    $(document).keypress(function(event){
    if(event.which==80 || event.which==112) {
        event.preventDefault(); /* don't propogate as it may register in an input box */
        pause();
    }
});

    function pause() {
    if(gridSettings.paused) {
        $('.paused').css({'visibility': 'hidden'}); /* currently paused so un-pause */
    } else {
        $('.paused').css({'visibility': 'visible'});
    }
    gridSettings.paused = !gridSettings.paused;

}

输入要预览的HTML文件：

或在URL前面加上前缀：http://htmlpreview.github.io/?https://raw.github.com/twbs/bootstrap/gh-pages/2.3.2/index.html

或者在浏览GitHub或BitBucket时使用此bookmarklet：

按键截取在$（document）.ready（）内。函数Pause（）位于该块之外

我试过在Safari中使用调试工具。在调用pause（）的代码行上有一个断点；在keypress事件处理程序中，当我按“p”时，它会到达该断点。但是，当我进入pause（）时，它不会调用函数（函数上有另一个断点），而是进入HTML代码的第三行（…使用此bookmarklet…）

我的第一个想法是HTMLPreview可能正在重新定义一个函数或全局变量（在看到一篇关于为什么全局变量不好的文章之前，我写了这篇文章的大部分内容！），但我已经仔细阅读了代码，我能看到也看不到冲突

---

我是一个新手（如果你不知道的话），我正在努力弄清楚为什么它不能在HTMLPreview中工作，但是它在本地运行很好。有谁能告诉我HTMLPreview中的怪癖，或者为什么它的运行时行为不同？也许给我一些调试指针

您在控制台中查找错误了吗？是的。加载favicon时出现了一个错误，但这不是我的资产之一，因此可能与htmlpreview有关。它似乎不会影响html或javascript的执行。除此之外，什么都没有。@Mike:事实上，我注意到另外两个与CSS相关的错误：控制台报告我的两个CSS文件没有被解析，因为它们是错误的mime类型。我不知道该如何解决这个问题-在我的HTML中，我将类型设置为“text/css”，但我认为这是web服务器的一个功能？？很抱歉一直发布这些附加注释，但Chrome报告的css和JS的mime类型错误；Firefox和Safari报告css的mime类型错误。在Firefox和Safari中，它不起作用（但页面样式正确）；在Chrome中，它正在工作（并且样式设置正确）。当它样式设置正确并且正在执行javascript时，我被难住了——但至少它在Chrome中工作。你在控制台中查看过错误吗？是的。加载favicon时出现了一个错误，但这不是我的资产之一，因此可能与htmlpreview有关。它似乎不会影响html或javascript的执行。除此之外，什么都没有。@Mike:事实上，我注意到另外两个与CSS相关的错误：控制台报告我的两个CSS文件没有被解析，因为它们是错误的mime类型。我不知道该如何解决这个问题-在我的HTML中，我将类型设置为“text/css”，但我认为这是web服务器的一个功能？？很抱歉一直发布这些附加注释，但Chrome报告的css和JS的mime类型错误；Firefox和Safari报告css的mime类型错误。在Firefox和Safari中，它不起作用（但页面样式正确）；在Chrome中，它可以正常工作（并且可以正确地设置样式）。当它正确地设置样式并且执行javascript时，我被难住了——但至少它在Chrome中可以工作。

        <p>Enter the HTML file to preview: <input type="url" id="file" value="" placeholder="e.g. https://github.com/user/repo/blob/master/index.html" size="70"> <input type="submit" value="&raquo;"></p>

        <p>or prepend to the URL: <strong>http://htmlpreview.github.io/?</strong>https://raw.github.com/twbs/bootstrap/gh-pages/2.3.2/index.html</p>

        <p>or use this bookmarklet while browsing GitHub or BitBucket: <a href="javascript:void('http://htmlpreview.github.io/'==window.location?alert('Drag me to your bookmarks bar!'):window.location='http://htmlpreview.github.io/?'+window.location)"><strong>HTMLPreview</strong></a></p>