在 Google Colab html 中导入外部 JS 脚本答案

【问题标题】：Import external JS scripts in Google Colab html在 Google Colab html 中导入外部 JS 脚本
【发布时间】：2019-06-11 16:46:08
【问题描述】：

我很难将自定义外部 JS 文件导入 Google Colab。我使用 html + js，遵循以下工作流程：

1 / 进口

from IPython.display import HTML, SVG
from IPython.core.magic import register_cell_magic

2 / 挂载驱动器

from google.colab import drive
drive.mount('/content/drive')

3/html

@register_cell_magic
def dojs(line, src):
  return HTML(f"""
  <canvas id="renderCanvas" touch-action="none" width="1280px" height="720px"></canvas> 
  <script src="content/drive/My Drive/Colab Notebooks/files/testJavascript.js"></script>
  <script>
  {src} 
  </script>
  """)

4/js

%%dojs
//...trying to use functions from testJavascript.js

也许如何做到这一点真的很简单，但我是 Colab 的新手。我收到“加载资源失败：服务器响应状态为 500 ()”。

【问题讨论】：

标签： javascript python html google-colaboratory

【解决方案1】：

你需要把你的JS文件放在这里：

/usr/local/share/jupyter/nbextensions/google.colab/

那么就可以通过路径访问了

/nbextensions/google.colab/

在您的情况下，您需要将您的 js 文件复制到那里：

!cp /content/drive/My\ Drive/Colab\ Notebooks/files/testJavascript.js \
    /usr/local/share/jupyter/nbextensions/google.colab/

然后将dojs()改为

@register_cell_magic
def dojs(line, src):
  return HTML(f"""
  <canvas id="renderCanvas" touch-action="none" width="1280px" height="720px"></canvas> 
  <script src="/nbextensions/google.colab/testJavascript.js"></script>
  <script>
  {src} 
  </script>
  """)

【讨论】：

【解决方案2】：

script src="content/drive... 这样的行不起作用。原因是您的 Drive 文件存在于执行代码的后端 VM 上。但是，使用 <script> 标记将由您的浏览器针对当前的基本来源解析，即 colab.research.google.com，它不会提供您的云端硬盘文件。

这里的高级输出示例中有一些提供本地文件的方法：

https://colab.research.google.com/notebooks/snippets/advanced_outputs.ipynb#scrollTo=R8ZvCXC5A0wT

【讨论】：