IPython：将 Javascript 脚本添加到 IPython 笔记本

Posted 2023-02-23

【中文标题】IPython：将 Javascript 脚本添加到 IPython 笔记本

【英文标题】：IPython: Adding Javascript scripts to IPython notebook

【发布时间】：2013-05-27 00:22:01

【问题描述】：

作为项目的一部分，我需要在 IPython 模块中嵌入一些 javascript。 这就是我想做的：

from IPython.display import display,Javascript
Javascript('echo("sdfds");',lib='/home/student/Gl.js')

我的 Gl.js 看起来像这样

function echo(a)
alert(a);

有什么方法可以让我在笔记本中嵌入“Gl.js”和其他此类外部脚本，这样我每次尝试执行一些需要那个图书馆。

【参考方案1】：

我有兴趣从 Jupyter 代码 (Python) 单元调用 JavaScript 来处理字符串，并将处理后的字符串输出到（相同的）代码单元输出中；感谢Inject/execute JS code to IPython notebook and forbid its further execution on page reload 和Why cannot python call Javascript() from within a python function? 现在我有了这个例子：

from IPython.display import display, Javascript, Markdown as md, html

def js_convert_str_html(instring_str):
    js_convert = """
        <div id="_my_special_div"></div>
        <script>
        var myinputstring = '0';
        function do_convert_str_html(instr) 
            return instr.toUpperCase();
        
        document.getElementById("_my_special_div").textContent = do_convert_str_html(myinputstring);
        </script>
    """.format(instring_str)
    return HTML(js_convert)

jsobj = js_convert_str_html("hello world")
display(jsobj)

请注意，JavaScript 处理的字符串不会返回给 Python本身；相反，JavaScript 本身会创建自己的 div，并将字符串转换的结果添加到其中。

【参考方案2】：

您可以使用IJavascript（用于 Jupyter 笔记本的 Javascript 内核）。

【参考方案3】：

由于某种原因，我在使用 IPython.display.Javascript 时遇到了问题。这是我的替代方案，它可以处理导入外部 .js 文件和运行自定义代码：

from IPython.display import display, HTML

def javascript(*st,file=None):
    if len(st) == 1 and file is None:
        s = st[0]
    elif len(st) == 0 and file is not None:
        s = open(file).read()
    else:
        raise ValueError('Pass either a string or file=.')
    display(HTML("<script type='text/javascript'>" + s + "</script>"))

用法如下：

javascript('alert("hi")')
javascript(file='Gl.js')
javascript('echo("sdfds")')

【参考方案4】：

在 IPython Notebook 中嵌入 D3

https://blog.thedataincubator.com/2015/08/embedding-d3-in-an-ipython-notebook/

总结一下代码。

导入脚本：

%%javascript
require.config(
  paths: 
      d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min'
  
);

像这样添加一个元素：

%%javascript
element.append("<div id='chart1'></div>");

或者这个：

from IPython.display import Javascript
#runs arbitrary javascript, client-side
Javascript("""
           window.vizObj=;
           """.format(df.to_json()))

IPython Notebook：Javascript/Python 双向通信

http://jakevdp.github.io/blog/2013/06/01/ipython-notebook-javascript-python-communication/

一篇更详尽的文章解释了如何在 JavaScript 中访问 Python 变量，反之亦然。

【讨论】：

不幸的是，上述双向解决方案不再像文章中介绍的那样工作。

【参考方案5】：

作为一个非常短期的解决方案，您可以利用 IPython 的 display() 和 HTML() 函数将一些 JavaScript 注入到页面中。

from IPython.display import display, HTML
js = "<script>alert('Hello World!');</script>"
display(HTML(js))

虽然我不推荐使用官方的custom.js 方法，但有时我确实发现它对快速测试某些东西或动态生成一个小的 JavaScript sn-p 很有用。

【讨论】：

我们可以在这里更改js 字符串以加载外部.js 文件吗？

也可以改成js = """ """ HTML(js )，这样就可以加载外部的js文件了。

【参考方案6】：

我已经与这个问题作斗争了好几天了，这似乎是可行的；不过买家要小心，这是一个最小的工作解决方案，它既不漂亮也不优化 - 一个更好的解决方案将非常受欢迎！

首先，在.ipython/<profile>/static/custom/myScript.js 中，我们做了一些 require.js 魔术：

define(function()

    var foo = function()
            console.log('bar');
        

    return 
        foo : foo
    
);

复制此模式以获得尽可能多的功能。然后，在.ipython/<profile>/static/custom/custom.js 中，将它们拖到持久化的东西中：

$([IPython.events]).on('notebook_loaded.Notebook', function()

    require(['custom/myScript'], function(custom)
        window.foo = custom.foo;
     );

);

是的，我是一个在窗口对象上扔东西的可怕人，你认为合适的命名空间。但现在在笔记本中，一个单元格像

%%javascript

foo();

应该做它看起来应该做的事情，而不需要用户显式地导入你的 JS。我很想看到一个更简单的解决方案（请开发人员在custom.js 中有$.getScript('/static/custom/util.js'); 来加载一堆全局JS 函数） - 但这是我目前最好的解决方案。除了唱歌和跳舞之外，IPython 笔记本团队的巨大进步，这是一个很棒的平台！

【参考方案7】：

至少现在不是通过安装软件包开箱即用。 方法是使用custom.js 和jQuery getScript 将js 注入到notebook 中。

我明确地对如何做到这一点含糊其辞，因为它是一个不时变化的开发功能。

您应该知道的是，用户配置文件中的 static 文件夹是 merged，带有网络服务器静态资产，允许您通过请求正确的 url 来访问此文件夹中的任何文件。

几个小时前，这个问题已经在 IPython 每周视频“lab meeting”上被问到，在 youtube 上直播和 disponible（你可能有更长的答案），我已经开始与问题的作者讨论 @987654322 @

【讨论】：

我需要在哪里存储我的脚本“Gl.js”以使用 getScript()。 'Javascript('''$.getScript("Gl.js");''')' 它给出了 404 错误

确切路径和指令取决于您运行的 IPython 版本。那就是 $.getScript("static/Gl.js") 和~/.ipython/profile_default/static/[custom]/GI.js。我建议搜索IPython custom.js，在 ml/hipchat 上询问/搜索，因为我担心 *** 的局限性太大，无法为您提供所有必要的解释。

问题是这里的解释会太长，并且可能会改变，难以嵌入代码......等等。我们可以在 IPython ML 或 gihtub bugtracker 上讨论这个问题，如果它托管在任何带有问题跟踪器的地方，也可以在你的 repo 上讨论。

好吧，我和我的导师谈过同样的问题，他或我自己都会在 IPython ML 上发帖。少量的研究结果表明这是 IPython 中的热门话题之一开发

@Matt 改变了吗？