推荐书: Python开发最佳实践

如何在jupyter notebook中运行javascript和HTML代码

微博@mlln-cn, 并附上文章url链接, 我就能回答你的问题奥!

作为一个博客主, 很多时候我们会用到jupyter notebook作为自己的博客撰写编辑器, 我们可能会遇到一个问题, 如何在notebook中运行JavaScript代码呢?

其实很简单, 用到了notebook中内置的魔法。

列出魔法

如果你想要查看所有魔法你可以使用下面的命令:

1
%lsmagic
输出(plain):
Available line magics:
%alias %alias_magic %autoawait %autocall %automagic %autosave %bookmark %cd %clear %cls %colors %config %connect_info %copy %ddir %debug %dhist %dirs %doctest_mode %echo %ed %edit %env %gui %hist %history %killbgscripts %ldir %less %load %load_ext %loadpy %logoff %logon %logstart %logstate %logstop %ls %lsmagic %macro %magic %matplotlib %mkdir %more %notebook %page %pastebin %pdb %pdef %pdoc %pfile %pinfo %pinfo2 %popd %pprint %precision %prun %psearch %psource %pushd %pwd %pycat %pylab %qtconsole %quickref %recall %rehashx %reload_ext %ren %rep %rerun %reset %reset_selective %rmdir %run %save %sc %set_env %store %sx %system %tb %time %timeit %unalias %unload_ext %who %who_ls %whos %xdel %xmode

Available cell magics:
%%! %%HTML %%SVG %%bash %%capture %%cmd %%debug %%file %%html %%javascript %%js %%latex %%markdown %%perl %%prun %%pypy %%python %%python2 %%python3 %%ruby %%script %%sh %%svg %%sx %%system %%time %%timeit %%writefile

Automagic is ON, % prefix IS NOT needed for line magics.

上面的命令在notebook中运行就会列出所有的魔法, 如果你仔细查找会找到HTML和JavaScript魔法, 他们就是我们想要的。

HTML代码

下面我们来写一个简单的HTML代码:(运行以后就会直接将html代码渲染成一个文件选择组件)

1
2
3
%%HTML

<input id="file" type="file">
输出(html):

JavaScript代码

下面我们使用魔法”%%javascript”来运行js代码:

1
2
3
4
5
%%javascript

$('#file').change(function(e){
element.text(e.target.files[0].name)
})
输出(plain):

运行了上面的代码以后, 我们点击上面的选择文件按钮就可以实时输出文件名称。

引入JavaScript第三方库

有时候我们需要用到其他js库, 引入js库到notebook的方法也很简单, 只需要用到HTML魔法, 比如:

1
2
3
%%HTML

<script src="https://cdn.bootcss.com/xlsx/0.15.6/xlsx.full.min.js"></script>
输出(html):

上面的库用于读取和写入excel数据的工具, 引入以上工具以后, 我们可以就可以得到一个新的对象”XLSX”, 下面测试一下:如果下面的代码没有提示错误, 并成功弹出警示框, 说明你的XLSX已经引入成功了!!

1
2
3
%%javascript

alert(XLSX)
输出(plain):

注意
本文由jupyter notebook转换而来, 您可以在这里下载notebook
有问题可以直接在下方留言
或者给我发邮件675495787[at]qq.com
请记住我的网址: mlln.cn 或者 jupyter.cn

赞助

运营本站花费了很多时间和精力, 并且本站坚持不放广告, 如果你觉得本站对你有帮助, 请资助我一杯咖啡: