如何在 IPython 笔记本上使用 WebGL 画布运行 HTML5 文档答案

【问题标题】：how can I run HTML5 doc with WebGL canvas on IPython notebook如何在 IPython 笔记本上使用 WebGL 画布运行 HTML5 文档
【发布时间】：2016-02-09 18:51:00
【问题描述】：

在这个链接上有一个很好的 WebGL 教程：

http://learningwebgl.com/blog/?p=571

我使用这个例子作为这个问题的起点：

http://learningwebgl.com/lessons/lesson06/index.html

所以它在我的浏览器上运行良好。我复制了源和所需的库：

 - glMatrix.html
 - webgl-utils.js

在我的电脑上。现在我可以在我的浏览器上很好地再次运行它们了。

在源 html 中，这些库被称为外部库，如下所示：

<script type="text/javascript" src=".\glMatrix.js"></script>
<script type="text/javascript" src=".\webgl-utils.js"></script>

它们与我的源 html 位于同一目录中，即 kvBox.html。

现在我想在笔记本单元格中运行这个 html。我输入：

from IPython.core.display import HTML

def putHTML():

    source = open("kvBox.html", "rb").read().decode()
    return HTML(source)


putHTML()

同样的屏幕，没有盒子和画布。笔记本的输出行上没有错误消息。

当我查看笔记本服务器控制台时，我看到以下错误：

[I 21:56:51.077 NotebookApp] 302 GET /notebooks/.%5CglMatrix.js?_=1454010913066
(::1) 15.64ms
[I 21:56:51.077 NotebookApp] Refusing to serve hidden file, via 404 Error
[W 21:56:51.077 NotebookApp] 404 GET /files/.%5CglMatrix.js (::1) 0.00ms referer
=http://localhost:8888/notebooks/Untitled4.ipynb?kernel_name=python3
[I 21:56:51.093 NotebookApp] 302 GET /notebooks/.%5Cwebgl-utils.js?_=14540109130
67 (::1) 0.00ms
[I 21:56:51.093 NotebookApp] Refusing to serve hidden file, via 404 Error
[W 21:56:51.093 NotebookApp] 404 GET /files/.%5Cwebgl-utils.js (::1) 0.00ms refe
rer=http://localhost:8888/notebooks/Untitled4.ipynb?kernel_name=python3

我已经用谷歌搜索并查看了将外部库包含到笔记本的问题。大多数情况下，我在 github 上找到了 noteook 扩展。我需要自己添加的解决方案。

最近的问题是这个项目：

How to add external javascript file in Ipython notebook

所以我尝试对上述外部库使用 %%html 命令。输出行没有错误，但控制台同样拒绝错误。

编辑：

在阅读并尝试了这么多没有奏效的不同建议后，我有了一个解决方法。我自己写了一个简单的包含例程。我将库代码合并到我的源 html 中，在上面的“源”字符串中，一切正常。

【问题讨论】：

我不知道如何包含外部 JS 库，但我通过蛮力将代码添加到 html 文档中作为作为 normla 内部 javascript，它工作正常。

标签： javascript html ipython external

【解决方案1】：

URL 中的路径分隔符是/ 而不是\。见the documentation。

您的浏览器似乎正在执行错误恢复，而 IPython 没有。

因此，/files/.%5CglMatrix.js 出现 404 错误（%5C 是一个 URL 编码 \），而不是 /files/glMatrix.js 的 200 OK。

使用正确的网址。

【讨论】：

我一定已经尝试过所有可能的组合，包括绝对路径或相对路径、反斜杠或正斜杠、前面的点或没有，或者根本没有 skas，但我会回去并 gşve 它尝试一下，因为从长远来看，其他几个人将需要它。
我再次尝试使用正斜杠。现在我得到：笔记本输出单元格上的“mat4 not found”错误。 mat4 位于 glMatrix.js 中。在 jupyter 控制台上，我收到“302 GET/NOTEBOOKS/glMAtrix.js?_=...”错误。我检查了 nbextensions 目录，我的笔记本启动目录；磅在那里。我再次尝试通过以下方式重新定义扩展：“notebook.nbextensions.install_nbextension(path = "C:/..."。相同的 302 /GET and mat4 not found 错误。
我想我找到了错误，这与反斜杠有关；但不在我的代码中 - 在处理程序代码中。

【解决方案2】：

我想我找到了错误的根本原因。正如 Quentin 所指出的，它与反斜杠字符有关。但不在我的代码中。它在处理程序代码中。我不确定它是在 Tornado 端还是 Notebook 端，但在它收集路径信息的处理程序代码中， os.path.join 命令创建反斜杠；对 python 来说是正常的，但对 Javascript 来说不是很好。

这是我在原始 Tornado 应用程序上创建的一段跟踪：

WARNING:tornado.access:404 GET /img%5Cbaseball.jpg (127.0.0.1) 0.00ms
handler_path:  ./images\BouncingBallDemo\baseball.jpg
app_path:  ./images\baseball.jpg
img_src:  /img\baseball.jpg

用正斜杠替换反斜杠后，我的代码在我的 Tornado 应用程序上运行良好。我相信我原来的笔记本问题也发生了类似的事情。我不确定我自己是否能够找到解决方法，我会检查一下。

【讨论】：